CSS doesn't block rendering on Firefox Quantum

Question

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

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? — Kaddath, Jan 30 '18 at 08:24
Hi @Kaddath I thought that putting CSS in the section of document would block rendering. The waiting time is the same as the gifs that I uploaded... — Giovanni, Jan 30 '18 at 11:56
I don't know enough about the blocking process as i said. Anyway, placing ` — Kaddath, Jan 30 '18 at 13:26
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. — Richard S. Hall, May 02 '18 at 20:06
Relevant bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1404468 — abney317, Jun 05 '19 at 22:34

score 3 · Answer 1 · answered Aug 27 '19 at 13:30

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:

Scripts on the page that force layout/style recalc, that are executed before the stylesheets are loaded.
- It's recommended to "Put all your styles in and make sure that any script that asks for layout information comes after them".
- Be careful with defer scripts, which may execute before the stylesheets are loaded (spec bug).
An iframe that loads faster than parent page's stylesheets forces layout of the parent page for complicated reasons, described in the bug.
Addons (example) which ask for layout information before the styles finished loading (i.e. on 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.
Firefox had a bug causing it on sites with 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:

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.

score 1 · Answer 2 · answered Nov 22 '19 at 07:46

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

CSS doesn't block rendering on Firefox Quantum

2 Answers2

Additionnal info :