Firefox fails to load when running inside an iframe with display set to none #7000
Assignees
Comments
devversion
added a commit
to devversion/material2
that referenced
this issue
Sep 12, 2017
Due to a Firefox Bug (https://bugzilla.mozilla.org/show_bug.cgi?id=548397) the `getComputedStyle` call in the `MdCommonModule` will return `null` and cause a runtime exception because normally the computed styles are never `null` for the test element. Since this it's very uncommon that a developer places a Angular Material application inside of a hidden iframe, a simple null check should be enough to get the application running. Fixes angular#7000
andrewseguin
pushed a commit
that referenced
this issue
Sep 29, 2017
* fix(common-module): check if computed styles are available Due to a Firefox Bug (https://bugzilla.mozilla.org/show_bug.cgi?id=548397) the `getComputedStyle` call in the `MdCommonModule` will return `null` and cause a runtime exception because normally the computed styles are never `null` for the test element. Since this it's very uncommon that a developer places a Angular Material application inside of a hidden iframe, a simple null check should be enough to get the application running. Fixes #7000 * Add comment about Firefox case
|
Awesome, thanks for picking this up! |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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?
The text was updated successfully, but these errors were encountered: