Flash of unstyled content (FOUC) in Firefox only? Is FF slow renderer?

Question

I'm not seeing this issue in any other browser that I've tested - IE, Chrome, Opera - but whenever I load a page from the server, I'm seeing a flash of unstyled content before the CSS is applied.

This is even happening on subsequent page loads where everything should be cached - every time the page loads I see the unstyled content for a split-second, then everything settles in.

It's also worth noting (perhaps?) that the page is using @font-face to pull some Google fonts. They are stored in a separate stylesheet being pulled after the main responsive stylesheets and media queries.

I've tried a few different things, to no effect:

Rearranging order of CSS stylesheet links
Removing link to stylesheets with @font-face
Disabling Firebug? (Read on here somewhere...)

One other thing that may be worth mentioning is that I used quite a lot of Element Type CSS selectors in the page's CSS. Is it possible that this is slowing down the rendering process?

This seems unlikely as there is no problem immediately re-rendering the page upon changing the dimensions of the window - the responsive stuff renders fine immediately.

So this leads me to believe that there is some issue with how the CSS is being loaded.

Here is my HEAD code:

<!DOCTYPE html>
<head>
<!--<meta name="robots" content="noindex" />-->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
<title></title>

<!-- responsive stylesheets -->
<link rel="stylesheet" href="resources/css/320.css" type="text/css" media="screen and (max-width:320px)" />
<link rel="stylesheet" href="resources/css/480.css" type="text/css" media="screen and (min-width:321px) and (max-width:480px)" />
<link rel="stylesheet" href="resources/css/768.css" type="text/css" media="screen and (min-width:481px) and (max-width:768px)" />
<link rel="stylesheet" href="resources/css/960.css" type="text/css" media="screen and (min-width:769px) and (max-width:960px)" />
<link rel="stylesheet" href="resources/css/960+.css" type="text/css" media="screen and (min-width:961px)" />

<!-- custom fonts stylesheet -->
<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />

<!-- favicon -->
<link rel="shortcut icon" href="resources/images/ui/favicon.ico">

<!--[if lt IE 9]>
<link rel="stylesheet" href="resources/css/960+.css" type="text/css"/>
<![endif]-->
</head>

WTF is going wrong with Firefox? It's driving me nuts!

The bit you pasted shouldn't cause any flashes of unstyled content (though it _could_ in theory cause flashes of content not yet using the downloadable font... but only if that takes a while to load). Just to check, do you see the behavior in safe mode? See https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode#w_how-to-start-firefox-in-safe-mode — Boris Zbarsky, Jan 16 '14 at 04:21
@BorisZbarsky Thanks for the feedback, I'll try loading the fonts onto the server instead of pulling them from Google for now. Not sure about safe mode, will look into that. — user3199790, Jan 17 '14 at 04:45
Seems to be a duplicate of https://stackoverflow.com/questions/18943276/html-5-autofocus-messes-up-css-loading/18945951#18945951 — Christopher K., Dec 08 '17 at 10:35
@BorisZbarsky i followed the whole content in the link to mozila firefox help center. but it did not change my problem. I am facing this issue only in beisat.org and no other places. — Ali Samie, Jun 13 '22 at 14:38

score 46 · Answer 1 · answered Sep 11 '19 at 11:37

46

If you add a dummy <script> tag right after <body>, Firefox will show the page after all the css from <head> is loaded:

<body>
   <script>0</script>
   <!-- rest of the code -->
</body>

There is an official bugreport about this FOUC (Flash Of Unstyled Content) on the Firefox site: https://bugzilla.mozilla.org/show_bug.cgi?id=1404468

answered Sep 11 '19 at 11:37

Eddie's

499
4
8

2

Seems to fix it for those with the inspector open with the console warning: "Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content." – Joe DF Jun 18 '20 at 20:30
1

did not work for me - perhaps because it's a reintroduced bug? It is 2022, after all :-/ – ProsperousHeart Dec 22 '22 at 21:22
1

2023, bug's still here but the dummy script fixed it for me. I wonder if there's an actual way to approach this without using the dummy script. But I guess for now I'll have to use it. – Kaelan O'reily Apr 15 '23 at 02:07

Patronaut · Answer 2 · 2020-12-10T00:05:59.980

I had the same problem with Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. showing in the console, and a visible flash of unstyled content upon page refresh, withouth (F5) or with clearing the cache (Ctrl + F5). Having the developer tools open does not made a difference either.

What helped me was declaring a variable in a script just before the </head> tag ended, so basically after all the <link> tags.

It's important to note, that an empty script (or with just a comment) or any random javaScript would not help, but declaring a variable worked.

<head>
  <link rel="stylesheet" href="css/main.css" />
  <link rel="stylesheet" href="css/other.css" />

  <script>
    /*to prevent Firefox FOUC, this must be here*/
    let FF_FOUC_FIX;
  </script>
</head>

There was no need to rearrange links or not use imports within css or js files.

Please note that the issue will no longer be visible (FOUC is visibly gone), but the console might still show the same warning.

Solved the issue for me.. Even the warning is no longer showing up. — asdf, Nov 17 '20 at 21:00

score 15 · Answer 3 · answered Nov 27 '17 at 14:35

15

I was experiencing this error. A colleague has said that it's caused by the attribute, autofocus being added to a form field.

By removing this attribute and using JavaScript to set the focus the brief flash of unstyled content stops happening.

answered Nov 27 '17 at 14:35

ajtrichards

29,723
13
94
101

2

I experienced the same problem in Firefox 57.0.1 and can confirm that removing `autofocus` solved the problem. Thanks a lot. – Christopher K. Dec 08 '17 at 10:02
1

If the flash is caused by `autofocus`, then it can be solved without removing autofocus by adding an empty ` – proto-n Dec 27 '17 at 16:15
1

It seems this bug will be fixed in FF 60: https://bugzilla.mozilla.org/show_bug.cgi?id=712130 – sylbru Feb 16 '18 at 11:21
1

YES YES YES!! Thank you! How in the world can all of this be happening because of one little input text field with autofocus. I don't know how your friend discovered this being autofocus related, but wow. Thank you! – mateostabio Apr 27 '18 at 16:21
1

I can see this error message also on pages that do not have any input field at all. :E – Andreas Sep 07 '20 at 05:40

score 9 · Answer 4 · edited May 07 '22 at 19:44

For what it's worth, I had this same problem and found that it was being caused by having poorly formatted <html>...</html> tags.

To be precise, in my code I accidentally closed the HTML tag too early, like this:

<!DOCTYPE html>
<html lang="en"></html>
<head>
  <title>My title</title>

The code provided by the original poster is missing the opening <html> so I suspect that's probably what is happening there.

score 6 · Answer 5 · edited Jun 20 '20 at 09:12

Filament Group share they way they load their fonts in detail,

http://www.filamentgroup.com/lab/font-loading.html

which is a nice modern approach to @font-face loading

Smashing magazine also review there website performance and came up with a different solution that stores the caches a base64 copy of the font in local storage. This solution may require a different licence for you font.

A gist can be found at:

https://gist.github.com/hdragomir/8f00ce2581795fd7b1b7

The original article detailing their decision can be fount at:

http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/#webfonts

Additional recommendation

The head of your document contains far to many individual stylesheets, all these css files should be combined into a single file, minified and gziped. You may have a second link for your fonts placed before you main stylesheet.

<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<link rel="stylesheet" href="resources/css/main.css" type="text/css" />

score 6 · Answer 6 · edited May 05 '15 at 18:31

6

I've had the same issue. In my case removing @import rule in the CSS file and linking all the CSS files in the HTML resolved it.

edited May 05 '15 at 18:31

Ram

3,092
10
40
56

answered May 05 '15 at 17:32

Maya

61
1
2

This was my problem, I never would have thought of moving that to the html... – Daniel Nov 13 '20 at 01:52
I thought it helped, but after the second refresh the message appeared again.. – asdf Nov 17 '20 at 20:45

score 5 · Answer 7 · answered Mar 05 '19 at 15:40

In my case the reason of FOUC in FF was the presence of iframe on page. If I removing iframe from markup then FOUC disappears.

But I need iframe for my own hacking reasons so I changed this

<iframe name="hidden-iframe" style="display: none;position:absolute;"></iframe>

into this

<script>

  document.addEventListener('DOMContentLoaded', ()=>{
    let nBody = document.querySelector('body')
    let nIframe = document.createElement('iframe');
    nIframe.setAttribute('name', "hidden-iframe");
    nIframe.style.display = 'none';
    nIframe.style.position = 'absolute';
    nBody.appendChild(nIframe);
  });
</script>

I've added this inline JS right in template just for readability: in my case this code runs once per page. I know that it's dirty hack, so you can add this code in separated JS-file.

The problem was in Firefox Quantum v65.

score 0 · Answer 8 · answered Aug 21 '23 at 18:45

In my case (AWS Amplify), I was using a 302 redirect from https://website.com to https://www.website.com. Switching to a 301 redirect fixed this.

The problem could be a cache mixup for the background image on my site, since the bottleneck was some hundred ms of latency to download it.

score -1 · Answer 9 · answered Jan 10 '23 at 10:08

I had the same problem (but also in chrome). Even if many of the existing answers provide clues to the reason for FOUC I wanted to present my problem and its solution.

As I said, I had FOUC in a fairly large project and already had the suspicion of a racecondition in some form.

In the project SASS is used and via a "bootstrap" file for the css a fontawesome free package was added via import.

@import "@fortawesome/fontawesome-free/css/all.css";

This import has increased the total size of the css file by a lot, which caused the file to take a long time to load, and the browser went and already loaded the following javascript. The JS that was then executed forced the rendering of its content and thus created the FOUC.

So the solution in my case was to remove the big fontawesome package and insert the icons I used from it (~10) via an Icomoon custom font. Not only did this solve the FOUC but it also had the nice side effect that the delivered CSS files are much smaller.

Flash of unstyled content (FOUC) in Firefox only? Is FF slow renderer?

9 Answers9

Additional recommendation

Linked