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 Quicklinks, Browsers, JavaScript