From 5da9e64b36e3498c0a2e2e35a69a55c2b932ffe6 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Fri, 29 Sep 2017 22:15:28 +0200 Subject: [PATCH] fix(common-module): check if computed styles are available (#7003) * 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 --- src/lib/core/common-behaviors/common-module.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/lib/core/common-behaviors/common-module.ts b/src/lib/core/common-behaviors/common-module.ts index 5262c8e6b6a..e2b1c6323af 100644 --- a/src/lib/core/common-behaviors/common-module.ts +++ b/src/lib/core/common-behaviors/common-module.ts @@ -60,7 +60,12 @@ export class MatCommonModule { testElement.classList.add('mat-theme-loaded-marker'); this._document.body.appendChild(testElement); - if (getComputedStyle(testElement).display !== 'none') { + 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 ' + 'components may not work as expected. For more info refer ' +