Broken layout and style in Edge 40 (EdgeHTML 15)

[feuerste]

Description

In the latest Edge 40.15063.0.0 from Windows 10 Creators Update, the layout and style of the paper-listbox is broken, also when used e.g. inside paper-dropdown-menu.

Expected outcome

Actual outcome

Live Demo

https://www.webcomponents.org/element/PolymerElements/paper-listbox/demo/demo/index.html
https://www.webcomponents.org/element/PolymerElements/paper-dropdown-menu/demo/demo/index.html

Steps to reproduce

1. Download and install Windows 10 Creators Update from https://www.microsoft.com/en-us/software-download/windows10
2. Run any of the above live demos in Edge 40

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge 40
• IE 11
• IE 10

[rediche]

I've noticed this too. It can be replicated on browserstack.com.

Edge 40 is running EdgeHTML 15 for clarification.

This was not broken on Edge 38 with EdgeHTML 14.

[rediche]

I've done some further research on this issue.

Edge 40 & EdgeHTML 15 seems to be causing a wide variety of styling issues across the board.

Here is some similar cases:

• Importing typography.html causes ie & edge to lose shadows and elevation paper-styles#144
• Styles do not get applied in Edge 40+ (creators update and above) paper-styles#145
• Paper-item breaks in Edge 40+ (Windows Creators update) paper-item#115

A way I've found to fix some of the issues of paper-listbox/paper-item/paper-styles is to go directly into roboto.html in the package font-roboto and add type="text/css. It does not fix all the issues, but some. The paper-listbox will be vertical again. Only issue I can see on that solution, is that the selected item "jumps around" on screen. I also have no idea how that fix actually works, so problem is probably to be found elsewhere.

Overall it seems like the issues are going back to paper-styles, perhaps even Edge 40's support of CSS Custom Properties. It is already known that Edge 40 has some issues with them.

[feuerste]

I just found a workaround for the Edge 40 issues:
By enforcing

paper-item:focus,
paper-icon-item:focus {
  position: relative;
  opacity: 1.0;
  background-color: var(--paper-grey-500);
}

in a shared style file I could fix it throughout our application.
This should also work for PolymerElements/paper-styles#145 and PolymerElements/paper-item#115.

[feuerste]

I don't get the problems any more with webcomponentsjs 1.0.7, which uses shadycss 1.0.4, see also webcomponents/shadycss@74577b1 and webcomponents/shadycss@58575e5