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

css firefox stylesheet font-face fouc
user3199790 picture user3199790 · Jan 15, 2014 · Viewed 11.7k times · Source

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!

Answer

Eddie&#39;s picture Eddie's · Sep 11, 2019

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

Related questions

"The stylesheet was not loaded because its MIME type, "text/html" is not "text/css"

I have a javascript application and when I run it on firefox I am getting the following erro on the console: "The stylesheet was not loaded because its MIME type, "text/html" is not "text/css". DumbStuck!! EDIT: Note that …

Read More
Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Targeting only Firefox with CSS

Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules: <!--[if IE 6]> ...include IE6-specific stylesheet here... <![endif]--> Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be …

Read More