From 3a30c09701e2b138c4235d912b6d4bf8a395859b Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Tue, 12 Sep 2017 11:57:35 +0200 Subject: [PATCH 1/2] 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 --- src/lib/core/common-behaviors/common-module.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/lib/core/common-behaviors/common-module.ts b/src/lib/core/common-behaviors/common-module.ts index dcc15f4b33c6..3d4374581537 100644 --- a/src/lib/core/common-behaviors/common-module.ts +++ b/src/lib/core/common-behaviors/common-module.ts @@ -60,7 +60,9 @@ export class MdCommonModule { testElement.classList.add('mat-theme-loaded-marker'); this._document.body.appendChild(testElement); - if (getComputedStyle(testElement).display !== 'none') { + const computedStyle = getComputedStyle(testElement); + + if (computedStyle && computedStyle.display !== 'none') { console.warn( 'Could not find Angular Material core theme. Most Material ' + 'components may not work as expected. For more info refer ' + From 5d8fe81e9a04bc52693ba779cee70c6c5b1a0f5f Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Tue, 12 Sep 2017 12:30:43 +0200 Subject: [PATCH 2/2] Add comment about Firefox case --- src/lib/core/common-behaviors/common-module.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/lib/core/common-behaviors/common-module.ts b/src/lib/core/common-behaviors/common-module.ts index 3d4374581537..a2522a488040 100644 --- a/src/lib/core/common-behaviors/common-module.ts +++ b/src/lib/core/common-behaviors/common-module.ts @@ -62,6 +62,9 @@ export class MdCommonModule { const computedStyle = getComputedStyle(testElement); + // In some situations, the computed style of the test element can be null. For example in + // Firefox, the computed style is null if an application is running inside of a hidden iframe. + // See: https://bugzilla.mozilla.org/show_bug.cgi?id=548397 if (computedStyle && computedStyle.display !== 'none') { console.warn( 'Could not find Angular Material core theme. Most Material ' +