Polymer: Style issues on EDGE with Polymer 2

[RoXuS]

Description

I have some style issues with EDGE

Screenshot of the issue

Take on the paper-icon-item demo from webcomponents.org, but I have same issue on our applications.

Browsers Affected

• [ ] Chrome
• [ ] Firefox
• [x] Edge version 40.15063.0.0
• [ ] Safari 9
• [ ] Safari 8
• [ ] IE 11

Versions

• Polymer: v2.0.1
• webcomponents: v1.0.1

[dfreedm]

Is this issue only with the paper-icon-item element?

[RoXuS]

Nop @azakus, all component are affected, I have checked randomly the demos of some webcomponents.org and there is the same issue on paper-menu-button, paper-dropdown-menu, paper-progress, paper-spinner...etc

[loekup]

Can confirm this is an issue for all components

Weird thing is the issue does not exist on
Edge version: 38.14393.1066.0
EdgeHTML version: 14.14393

[aminisana]

I have the same problem
Microsoft Edge 40.15063.0.0
Microsoft EdgeHTML 15.15063

[eduardopthiago]

Me too, https://github.com/webcomponents/webcomponents.org/issues/1034

[feuerste]

See also PolymerElements/paper-listbox#39, PolymerElements/font-roboto#16 and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/

[eduardopthiago]

As mentioned by @feuerste , I solved my problem changing roboto.html file just adding type="text/css" on it. After changes, this file should be like this:

<style type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic" crossorigin="anonymous">
</style>

Thank you very much @feuerste

[feuerste]

@eduardopthiago, you can actually just use 1.0.3 of font-roboto now, since PolymerElements/font-roboto#16 is already merged and released :)
For any other issues, you can use the workaround I found.

[TimvdLippe]

It seems that this issue has been fixed and we haven't heard from any other Edge-specific CSS issues since. Therefore I am closing this issue. Feel free to reopen if you run into Edge-specific issues again and we are happy to investigate.

[TrebuhD]

The Polymer site I'm working on is completely unusable on Edge, and it seems impossible to debug because Edge doesn't recognize shadow roots in its DevTools. Here's a link, compare it to Chrome or Firefox.

[TimvdLippe]

@TrebuhD it seems that you have a file request that should 404 but instead serves back index.html. In my case, the url https://next.suttacentral.net/localization/elements/static_donations-page/nl.json does not return a JSON response, but index.html instead. I think Edge is more strict in this case and throws an error, while Firefox and Chrome are okay with this.