Flash of Unstyled Content (FOUC) explained

Under certain circumstances, Internet Explorer for Windows displays a Web page without styling for a moment before applying stylesheet information. This is referred to as the Flash of Unstyled Content (FOUC). The problem has been known for years, and there are easy workarounds available (see Flash of Unstyled Content at BlueRobot). But Internet Explorer is not the only browser that does this.

Safari also suffers from it, and the workarounds mentioned above do not help. It’s a bit frustrating to see it happening and get bug reports about it but not having any idea what causes it or how to make it go away. But now, after reading Dave Hyatt’s article The FOUC Problem, I think I understand it much better. That doesn’t mean I will be able to do much about it though.

When browsers encounter a stylesheet loading directive, they can either stall parsing and wait for the stylesheet to load, keep going, or stall on demand. Safari currently uses the “keep going” approach. This triggers an FOUC when a script tries to access a property that the browser doesn’t know the value of because the CSS hasn’t loaded yet. The JavaScript used by Google AdSense does that, which is why it happens on this site sometimes. I can’t change the AdSense JavaScript, so I can’t do anything about it. It seems to be a bit random though, since it does not happen on every page load.

What you as a developer can do to avoid causing FOUC is to make sure your scripts do not access layout properties while a page is loading. It will make your scripts behave better in all browsers:

Think of every use of a property like offsetWidth as a bottleneck that stalls Web page display while the engine computes an accurate snapshot of the entire page just to give the script a correct answer. If a script accesses such properties repeatedly while making numerous other layout/style changes between accesses, it can cripple the load speed of a Web site in every modern browser.

A few weeks ago I posted Google valid and strict, where I mentioned a quick remake I did of Google’s home page using valid HTML 4.01 Strict + CSS. Maybe someone could take a look at the JavaScript used by Google’s various services, perhaps starting with AdSense, and do something similar? Clean it up a bit and get rid of the FOUC.

Your next job would be convincing Google to use the improved script instead…

Posted on September 4, 2006 in Browsers, JavaScript, Quicklinks

Comments

  1. September 4, 2006 by Theo Skye

    One site I created a few years ago would always show the FOUC in IE6/Win even with the BlueRobot fix(es) applied. There was no avoiding it. The first page a user would load on the site, no matter what page it was, would always show the FOUC. But subsequent pages on the site would always load fine, I assume because the CSS files had been cached after the initial page had loaded. In order to fix the problem, I used PHP to literally slurp in (include()) the full CSS code in the CSS files into tags that were in the document , but only IF it was the first page on the site the user had loaded that session (the script would look for and set a session variable if it was the first page a user had loaded). So, on that first page laod, the CSS code would actually be visible in the source of the HTML file, inside the tag. Then, at the bottom of that first page load, I would get the browser to redundantly load/cache the actual CSS files individually with separate @import() directives. Then subsequent page loads would simply have the @import() directives up in the head without hard-coding the CSS inside the page. Yes, this tactic was essentially loading the CSS code twice on user’s the first page load, but it avoided the FOUC since the CSS was hard-coded into that first HTML file. The CSS wasn’t too heavy anyway. Plus, this was an internal, “intranet” website, so conserving a few KB of bandwidth wasn’t really a concern. It sounds complicated when explained, but it was really pretty simple.

  2. My new blog layout does this in Safari, my old one didn’t and I had small adsense banners on both. Very strange, I’ve never seen it happen before in Safari and its quite disconcerting.

    I’ve been staring blankly at my code for days now, I am glad I am not alone.

  3. Thanks Roger, I’d been pushing this on the issue of several gov’t sites developed here (they kept using the osterich algorithm - it isn’t happening. Well the comment in the side of the report swore a bit as well). I suspect a part of it is the web standards people on the project were very anti-Microsoft IE, meaning they were resistant to put one extra anything in code to cater for IE at all. No effort.

    So I can now test on Safari for FOUC, if so they’ll finally think about fixing the problems. FOUC may not be a showstopper but its inelegant and undesirable.

    So thanks for posting this one - live and learn.

  4. Would it help putting in a couple of JS lines to preload the .css files used by the page?

  5. If you do this, no FOUC. I just found this a while back when checking a few sites which suffered and which did not. It might fix it, it did for me and others.

    The idea is that we need to fix the cssfile loading.

    How?

    Just after any meta, put your imported css in style tags before any linked styles or scripts

    <style type="text/css">
    @import url(styles/imported.css);
    </style>
    
  6. I cant change the AdSense JavaScript, so I cant do anything about it. It seems to be a bit random though, since it does not happen on every page load.

    Can you not load the script through an image tag? Like this method:

    link

  7. September 7, 2006 by Graham Higgins

    Johan,

    Good call. I was seeing persistent FOUC with Safari - your tip fixed the problem.

  8. Exactly, a Safari problem. There was a mention if I am not mistaken that Safari 2.x builds would be fixed from FOUC.

    Do note that this is a adapted css import which excludes older browsers like NN4 and IE4. I have not tested if other import declarations can be used too. It probably work??

  9. I sometimes have problems with unstyled content actually staying on the page, (not just flashing before the CSS loads). This happens especially with IE6 and especially when on Hotmail’s site, (or Windows Live Mail, which incidentally crashes Firefox). It seems that half the CSS will load and the rest won’t, although I realize that perhaps I’m just not getting a CSS file sometimes perhaps it is an extreme version of FOUC.

  10. September 13, 2006 by Cecil Ward

    I’ve noticed a really ugly FOUC from time to time when using Opera 9, which is surprising, in such a recent browser. The delay before the page was re-rendered was really long, and so hardly qualified a ‘flash’, so long in fact that a user experiencing it could well think that the site or browser was broken. Has anyone else seen a ‘long period’ FOUC in any browser?

  11. Does this occur if you are using @import statements in external stylesheets?

  12. At the moment, Cecil, I’m intermittently seeing something like you describe in Opera 9.01 on my site (linked from my name above this comment).

    There are no @import statements anywhere. The stylesheets are loaded with link tags. Occasionally I’ll see partially unstyled content for several seconds.

  13. I think I’ve found a simple workaround for Safari FOUC: first CSS file just hides the body; last CSS file just shows the body. More info at http://jonaquino.blogspot

    .com/2007/02/workaround-for-safari-fouc-bug.html

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.