3.0 Preview doesn't render correctly on Firefox.

[RebeccaStevens]

Description

iron-component-page 3.0 preview renders incorrectly on Firefox. It renders correctly on Chrome. I haven't tested any other browsers.

Expected outcome

Renders the same as on chrome:

Actual outcome

Renders incorrectly:

• Header is not at the top of the page and does not take up the full width of the content container.
• Demo iframes do not fill the content container
• Incorrect font.

Live Demo

https://catalyst.github.io/CatalystElements/#/elements/catalyst-flip-button

Steps to reproduce

1. Put an iron-component-page element in the page.
2. Open the page in Firefox.

Browsers Affected

• [ ] Chrome 64
• [x] Firefox 58

[aomarks]

Thanks for the report! Have you seen the same thing with 2.x elements on Firefox?

[RebeccaStevens]

I've just tested with the latest release of this component (v3.0.1) with polymer 2.5.0 and everything works fine. It seems to just be an issue with the 3.0-preview branch using polymer 3 preview.

[RebeccaStevens]

After further testing, is seems that the issue was caused by ShadyCSS's custom style interface script. After removing this script, the page renders correctly on both Firefox and Chrome.