Flash Of Unstyled Content (FOUC) in Firefox 3.5+

Question

We've reached the end of our tether here trying to overcome a nasty and intermittent FOUC in Firefox 3.5.x+ for a new release we're working on.

We've tried:

• Disabling Javascript in FF
• Using Quirks mode rendering by removing the DOCTYPE
• Moving from @import for additional CSS to <link>
• Switching concatenation on and off
• Removing CSS files from the concat, one at a time
• Switching the local cache off in Firefox
• etc

Our previous release never exhibited any FOUC issues, so it's something we've done to this release. Changes we've made so far include:

• Using Base64 encoded images over Data URIs for all decorative imagery, served via CSS.
• Separating 'framework'-related CSS files from page-specific CSS and bundling them as two separate CSS files

To recreate the problem... use Firefox 3.5.x or 3.6.x, then:

1. Head on over to: http://my.publisher-subdomain.env.yola.net/
2. Login with username: '[email protected]' and password: 'stackoverflow'
3. Once logged-in, you should be at http://my.publisher-subdomain.env.yola.net/sites/
4. Click the Account link in the main nav.
5. The Account page should load, and you should see a FOUC. If the FOUC does not occur, clear your cache and reload the page.

Your help would be greatly appreciated! :)

UPDATE:

The dev environment is still exhibiting the FOUC, but only if FireFox is running low on memory or has a lot of extensions installed. Latency and rendering speed definitely affect the visibility of this FOUC.

Answer 1

I can be wrong, but this could be a concurrent connections issue. According to my Firebug's "Net" tab

the HTML page simply takes a lot of time to load - maybe also because it is on a development server? - and the style sheet gets loaded after the HTML page.

I can't claim to entirely understand what's happening here, but I would try putting the style sheet onto a different domain as a first measure. That should make Firefox establish a connection straight away.

It would probably also be a good idea to go back to normal images instead of data: URIs - that would reduce the size of the style sheet, and data: URIs won't work at all in IE < 8.