Flash of Unstyled Content (FOUC)

May 14, 2007  FILED TO: Technical, Web Design

I’d heard of the “Flash of Unstyled Content” problem, as it’s called, before but hadn’t really noticed it until testing a script-heavy site that I’ve been working on recently in Safari. The problem is that there is a pause between the HTML loading and the stylesheets being applied so you get a glimpse of the barebones, unstyled HTML and then it is re-rendered with the styles applied.  This only happens in certain browsers, Safari being one of them.

In my research into it I saw that many people blame it on Google AdSense as it seems to occur with sites sporting those ads. However, it is actually due to the way browsers (for example, Safari) load pages and the use of Javascript.

It seems that the browser holds off on loading the stylesheets until it has finished processing any Javascripts (which nowadays often affect the way the page looks), then it loads and applies the stylesheet.  The  FOUC ugliness occurs when the site is script-heavy and it takes longer to run the initial scripts than it does to load the HTML – there is a short amount of time in which the HTML has loaded but the scripts are still running and the stylesheets haven’t yet been applied.

I found a few fixes for this problem, but the simplest was the following:

In the <head> tag of the page, before any of the script or stylesheet imports insert the following to hide the content:

<style type="text/css">body { display: none; }</style>

At the very end of the page, before the closing body tag add the following to show the content:

<script>
//show the page - gets around FOUC
document.body.style.display="block";
</script>

This is not only an easy fix but it also, unlike many others, validates correctly as semantic XHTML. You may argue against relying on a javascript tag to show the page content but there are two things to consider: if the page wasn’t heavy in javascript you wouldn’t get the problem and therefore require this script, and also you could add a “noscript” tag to this to inform users that javascript must be turned on for them to use the site, so the solution is useful in more ways than one.

[Post to Twitter]  [Post to Delicious]  [Post to Digg]  [Post to Reddit]  [Post to StumbleUpon] 

Comments are closed.

Site designed by SPIRAL DESIGNS. Copyright © 2010 Pamela Ueckerman.
This site is optimised for Firefox and hosted on Wordpress.

Bring Down IE6