App looks broken when running on production mode IE11

[alvarezguille]

Tested with jetty:run and with package + running tomcat both with -Dvaadin.productionMode and -PproductionMode
Dark theme is not applied, and some other styling issues as seen on the following screenshot

Tested with vaadin 12.0.0.alpha4

[caalador]

Only thing missing for me is the table-logo.png that doesn't get served.
Have you tried clearing the browser cache and/or clearing all target folders?

[SomeoneToIgnore]

Is the issue fixed now?

[caalador]

No. The logo image is fixed, but the problem is with IE11 and that's not fixed.

[caalador]

All I can come up for this is that the css files use var() which is not supported for IE only for Edge.
It gets better if I remove all the var() usages from the shared-styles.css, but still it's not as it should be.

Perhaps there is a problem with the CSS polyfill for some reason.

[Legioth]

Isn't it so that the standard polyfill only applies for styles in <custom-style>. You'd have to manually apply the polyfilling logic if you want to use it with standalone css files?

[caalador]

That could be. Also I noted that for the [theme~=dark] IE gets the colors the wrong way so that color that should be hsla(214, 96%, 96%, 0.9) is actually hsla(213, 41%, 16%, 0.94) which is closer to the wanted background-color of hsl(214, 35%, 21%)

[caalador]

Also the theme is broken for Vaadin 10.0.5 also when running IE11

[caalador]

For the Dark theme it might be a problem with the bundler that it probably doesn't check for the theme variant dark and only brings in the light lumo theme.

The dark theme being the light theme in production mode can be seen also with the skeleton-starter with just adding @Theme(value = Lumo.class, variant = Lumo.DARK) No dark theme is shown only the base Lumo.

[caalador]

The transpilation step leaves me with this when IE11 loads the colors.html

[jouni]

Investigating this as well. I can’t make the dark theme work in IE11 in a pure Polymer app at the moment either.

[jouni]

Damn, I don’t seem to be able to make style modules work at all (<style include="foobar">).

Update: got that sorted by using at least one Polymer-based web component on the page. Otherwise it seems like style module includes are not applied at all.

[jouni]

Alright, this seems like a fundamental issue in Lumo itself, not only in this starter (I mean all Flow apps are probably broken in IE11 if they try to use the dark palette).

ShadyCSS seems to have a special case for the html selector. If you combine that with anything else (like html[theme~≈"dark"] or html, [theme~="dark"]) it will silently ignore polyfiling any custom properties inside that selector.

It seems we’ve (or I’ve) been assuming that the document root element would be polyfilled in all cases, no matter what selector matches it.

Needs to be fixed in vaadin-lumo-styles, and how the dark theme is applied on the global level, to support IE11. This could result in a breaking change, or at least deprecating the current way of applying the dark palette for the global scope.

[jouni]

Please follow the issue I just created for vaadin-lumo-styles.

[anasmi]

Seems to work in the latest version of starter:

[anasmi]

Closing