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…

September 4, 2006
Comments closed
Posted in Browsers JavaScript

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. September 4, 2006 by Sam

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. September 5, 2006 by nortypig

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. September 5, 2006 by Henrik

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

5. September 7, 2006 by Johan

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. September 7, 2006 by a

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. September 7, 2006 by Johan

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. September 7, 2006 by John Beales

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. September 18, 2006 by Jason Law

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

12. February 19, 2007 by Jonathan Michaels

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. February 25, 2007 by Jonathan Aquino

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

Sorry, comments are closed for this post.

Information, sponsorship, and externals

About the author

Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.

Looking for web hosting?

Use the promo code 456BEREASTREET3 to save USD 20 when you sign up!

Recommended books

456 Berea Street Bookstore

Recommended music

456 Berea Street Music Store

Latest articles

Validation statistics from Nikita the Spider Comments off: An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
Authentic Jobs API and Affiliates program Comments off: The Authentic Jobs job listing service now has a public API and an affiliate program.
What does Acid3 mean to you and me? Comments off: Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
Designing Web Navigation (Book review) Comments off: Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
DOMAssistant bundle for TextMate Comments off: To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
First impressions of Internet Explorer 8 Beta 1 Comments off: My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.

Flash of Unstyled Content (FOUC) explained

Comments