Created attachment 460277 [details] Screenshot showing behavior in Chrome, Firefox, and Safari The speculative HTML preparser in WebKit does not seem to eagerly download stylesheets in the HTML that follow an inline script, whereas Firefox and Chrome do. A simple test: <script> const start = Date.now() while (Date.now() - start < 2000) { // block rendering } </script> <link rel="stylesheet" href="./one.css"> <link rel="stylesheet" href="./two.css"> In this case, Safari (and WebKit Nightly 25167) will not start downloading the CSS until the 2000ms render-blocking script is run. Whereas Firefox and Chrome start eagerly downloading both CSS files before the script finishes. Incidentally, the same behavior can be seen for inline @imports: <style> @import './one.css'; @import './two.css'; </style> (I.e. imports behave the same as links in all three browsers.) Here are live repros to demonstrate: - Links: https://bl.ocks.org/nolanlawson/raw/871eced59d144dbe4bec242c1e45c8f1/links.html - Imports: https://bl.ocks.org/nolanlawson/raw/871eced59d144dbe4bec242c1e45c8f1/imports.html Note that Safari takes >2000ms to start downloading the CSS files, as reported by the performance resource timings, whereas Firefox and Chrome take much less than 2000ms.
Created attachment 460278 [details] Repro as static HTML/CSS files
<rdar://problem/95812007>