Component loaded on a hidden iframe throws an error on Firefox

[jarrodek]

Description

I have a page that uses paper dropdowns and paper dialog. The page is loaded as an iframe on another page. Initially the iframe is hidden on the top page.

With this scenario, FireFox throws an error:

TypeError: window.getComputedStyle(...) is null

on line 220, which is:

this._isRTL = window.getComputedStyle(this).direction == 'rtl';

Apparently, under FF, window.getComputedStyle(this) returns null when the component is rendered in hidden iframe.

Expected outcome

No error :)

Actual outcome

Error thrown in connectedCallback causes the element to stop rendering.

Live Demo

Don't have any.

Steps to reproduce

1. Create a simple page that uses an element that implements IronFitBehavior
2. Embed the page on another page:

   <section id="main" hidden>
     <iframe allowfullscreen="0" src="http://127.0.0.1:8000/components/chat-app/" height="450" frameborder="0" width="840"></iframe>
   </section>

3. Open the iframe page

Browsers Affected

• [ ] Chrome
• [x] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10