Menu
With Firefox Quantum I noticed a "glitch" on loading the CSS of some websites.
One of these is my company's website:
Or Github too:
In the first one, we have only one CSS file in the <head> section of our pages.
It seems that - only in Firefox Quantum - the CSS doesn't block the render of the page as it should. The rest of the page loads without the CSS for some instants, then the CSS is applied as if it loads asynchronously (but it's not).
Obviously, this behavior doesn't happen in all the websites I visited.
I really have no clue what's going on :)
815
To summarize information from bug 1404468, the "flash of unstyled content" ("FOUC") usually happens when something asks for information depending on styles before the stylesheets are loaded:
defer scripts, which may execute before the stylesheets are loaded (spec bug).iframe that loads faster than parent page's stylesheets forces layout of the parent page for complicated reasons, described in the bug.run_at: "document_end"). Firefox 60 (2018-05-09) fixed FOUC with the addons that queried layout using run_at: "document_idle", and a few add-ons were fixed around the same time.autofocus, notably GitHub. Also fixed in Firefox 60.Factors that do not cause FOUC by itself, but can increase the chances of it being visible:
nglayout.initialpaint.delay (which delays the initial painting of a page after it stopped being blocked by stylesheets, assuming the HTML is not fully loaded by that time) from 250ms to 5ms.
Finally, it's common to see the fonts on the web page "upgrade" to page-provided web fonts, because they don't block the initial rendering by design.
93
Quick fix that worked for me (from vrancken.gilbert in bug 1404468):
<body>
<script>0</script>
<!-- Your code ... -->
</body>
(...) if you add a dummy script right after your tag FF will only render the page when the CSS is loaded.
If you manage the Content-Security-Policy (CSP) in your application (prevents inline-script), it's necessary to white-list this line :
For example :
In your application :
<script nonce="JwkbSbZ2MYNwp5Adp8Nk">0</script>
In your 'Content-Security-Policy' HTTP Header :
(...) script-src 'self' 'nonce-JwkbSbZ2MYNwp5Adp8Nk'
Ref : MDN
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
