User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:56.0) Gecko/20100101 Firefox/56.0 Build ID: 20170623115718 Steps to reproduce: A large german newspaper and a news channel merged. There is a redirection from http://n24.de to https://www.welt.de/?wtrid=crossdevice.n24.hauptdomain . There you will get a centered div (like a modal dialog) which tells you that they merged. With stylo enabled, that div is not centered, has no white background and another font. I could nearly reproduce it by deactivating properties of that div that came from c-dialog__is-white and c-dialog__inactivity. Please edit the bug title if you have found another cause.

Screenshot (webrender+webrendest): Left: with stylo Right: without stylo

This may be the same bug in a different way. A slider (to mark/unmark a checkbox) has css classnames with underscores and is broken.

Sorry, forgotten. URL of 2017-06-24_welt.de.png: https://www.welt.de/videos/n24newsstream/video150981839/Die-N24-Nachrichten-live-im-Stream.html

Both pages look fine with my patches from bug 1375674.

Err, I was wrong, and I was testing with the wrong config, whoops... Not sure what's going on yet.

(In reply to Darkspirit from comment #2) > Created attachment 8881030 [details] > 2017-06-24_welt.de.png > > This may be the same bug in a different way. A slider (to mark/unmark a > checkbox) has css classnames with underscores and is broken. So this one is because we're not applying the video.css file. That page has: <link href="https://www.welt.de/static/stylesheets/d67cc29f/video.css" media="all" rel="stylesheet"> and: <link rel="null" href="https://www.welt.de/static/stylesheets/d67cc29f/video.css" as="style" onload="this.rel='stylesheet'"> Removing the rel="stylesheet" and re-adding it makes us start styling the slider properly. We seem to be losing track of that stylesheet somehow, I'm trying to build a bit more reduced test-case now.

So they use a pretty complex script to emulate <link rel="preload">. I haven't investigated which bits make us loose track of the stylesheet, but this testcase reproduces the bug: Stylo shows a red square, while Gecko shows a Green square.

Ok, so that bit is https://github.com/filamentgroup/loadCSS/blob/master/src/loadCSS.js and https://github.com/filamentgroup/loadCSS/blob/master/src/cssrelpreload.js. That script has: // temporarily set media to something inapplicable to ensure it'll fetch without blocking render ss.media = "only x"; Which means that we'll think that the stylesheet is not applicable when it loads. They create the <link> using Javascript, so we _do_ get that media right the first time (unlike when they come from the HTML parser, which is bug 1372041)... But we don't update it properly when they change the media to the original media="all", so the Servo side of things will always believe that that stylesheet doesn't apply. So this is a slightly different variant of bug 1372041, which hopefully will be resolved soon and will fix this one too.

The first issue, the uncentered modal dialog, is exactly the same root cause: <link rel="preload" href="https://www.welt.de/static/stylesheets/eac3d7e4/section.css" as="style" onload="this.rel='stylesheet'">

Added the problem from comment 9, comment 6 and of all duplicate bugs (change <link rel> with onload) to the summary.

Nightly 56 x64 20170703100343 @ Debian Testing (Linux 4.9.0-3-amd64, Radeon RX480) about:support > Stylo: true (enabled by user) Verified fixed: * we merged message on http://n24.de/ * Autoplay on/off slider on https://www.welt.de/videos/n24newsstream/video150981839/Die-N24-Nachrichten-live-im-Stream.html