Skip to content

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

@abogaart

Description

@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?

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions