Login/Register
CSS doesn't block rendering on Firefox Quantum
Asked Answered
cssfirefoxbrowserrenderingfirefox-quantum
B

2

14

With Firefox Quantum I noticed a "glitch" on loading the CSS of some websites.

One of these is my company's website:

DoveConviene Website

Or Github too:

Github Website

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 :)

Bomar answered 30/1, 2018 at 8:14 Comment(5)
that used to happen a lot back in the day, actually i didn't know CSS resources became blocking, thought it was the web speed that solved that.. is the waiting time you experienced really long? – Nellienellir
Hi @Nellienellir I thought that putting CSS in the <head> section of document would block rendering. The waiting time is the same as the gifs that I uploaded... – Bomar
I don't know enough about the blocking process as i said. Anyway, placing <style> tags in the <head> is a strong guarantee that the styles are applied with no delay (html code parsing is sequential), but i can't confirm for linked files. However, from my console, the main CSS files in <head> are already loaded before 250ms, the visual changes you see after may come from something else. By the way, loading time for images is separated from the CSS loading itself, so images are a whole different topic. – Nellienellir
I'm noticing this too for a website I'm creating with Craft CMF using Firefox 59.0.2 and it is very annoying. It doesn't happen under Chrome. – Naif
Relevant bug report: bugzilla.mozilla.org/show_bug.cgi?id=1404468 – Thyestes
S
3

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:

Factors that do not cause FOUC by itself, but can increase the chances of it being visible:

  • Firefox 53 reduced 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.
    • If the FOUC-causing stylesheets happen to load before the delay, you won't see the unstyled content. With 5ms it became much less likely.
    • If the HTML page itself loads slowly, you may see some content jumping around the page with more likelihood.
  • Slow network combined with the factors above increases the chances of seeing the FOUC.

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.

Snapdragon answered 27/8, 2019 at 13:30 Comment(0)
O
1

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.

Additionnal info :

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

Ocasio answered 22/11, 2019 at 7:46 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.