Firefox fails to load when running inside an iframe with display set to none

[abogaart]

Bug, feature request, or proposal:

The MdCommonModule._checkTheme function throws an error when the angular+material2 app is running inside an iframe that has CSS property display set to 'none'.

This is caused by a long outstanding bug in Firefox that seems unlikely to be fixed anytime soon; window.getComputedStyle() returns null inside an iframe with display: none

The behavior of MdCommonModule._checkTheme could be extended by doing a null-check on the result of window.getComputedStyle() and if true follow a more elaborate code path to detect an angular material theme, e.g. by iterating document.stylesheets.cssRules and trying to find the 'mat-theme-loaded-marker' rule. This approach will have an impact on the load time (I think) but as the app is hidden at this point it should not matter that much.
A simpler change could be to just log an error explaining the Firefox issue, as this should only occur in devMode.

What is the expected behavior?

The application bootstraps in the hidden iframe and is shown when the iframe is no longer hidden.

What is the current behavior?

The application fails to bootstrap.

What are the steps to reproduce?

See http://plnkr.co/WQ6BXarpPGQQ7kHoiRSg using Firefox

What is the use-case or motivation for changing an existing behavior?

Although there is a workaround (disable sanityChecks) it seems a bit harsh to not bootstrap the app at all.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Firefox specific.

Is there anything else we should know?

[abogaart]

Awesome, thanks for picking this up!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}