The Montoya Herald, a weblog about Blueprint, jQuery, design, music and life, publishing on the web since September 2005. Written by Christian Montoya: developer, designer and entrepreneur.

Safari FOUC [not] Defeated

Posted on October 13, 2005.

Apparently I managed to kill the Safari FOUC (Flash of Unstyled Content) on Liquid Designs.

Correction: I did not squash the Safari FOUC. Turns out it's due to Google Adsense. Well, I'll probably be getting rid of that soon, so I guess that's the fix. If there is another way to prevent it, I'd like to know!

Get a trackback link

13 Comments

1. Andrew on October 29, 2005

   Nope, not squashed. It's caused by Google AdSense, although I'm not sure why. I've observed the same FOUC effect on a number of sites, including my own and 456bereastreet.com

2. C Montoya on October 30, 2005

   Thanks for letting me know! I figured that didn't solve the problem, but I didn't have anyone to test it.

   If you find the solution, let me know!

3. Andrew on November 1, 2005

   Rumor has it the latest Safari update to v2.0.2 (416.12) has solved this bug. I haven't yet tested, but sounds promising!

4. Johan on February 15, 2006

   I guess it has to do with @import stylesheets.
   But there are many variations too.

   possible workaround use media=all and linked stylesheets

5. Johan on February 15, 2006

   did not help either except putting css first and then any js external scripts
   that did help

6. C Montoya on February 15, 2006

   Actually I don't think that fixes it either. Clear the cache before testing to see.

7. Johan on February 16, 2006

   Actually I don’t think that fixes it either. Clear the cache before testing to see.
   I tested with always cache cleared before reloading the page

   I found when JS is disabled all loads better.

   The linked stylesheet does not affect the FOUC , media settings for the styles either nor using style tags. It seems the only way is to implement a time delay to check the styles are ready (but how) This would require JS?DOM?

8. Johan on February 16, 2006

   First my pages suffered and now not anymore.

   <meta http-equiv="imagetoolbar" content="no" />
<style type="text/css" media="all">
@import "/styles/page.css"
@import "/styles/styled.css"
</style>
<!–[if IE]>
<link rel="stylesheet" href="/styles/ie_win.css" type="text/css" media="screen" />
<![endif]–>
<script type="text/javascript" src="/inc/addEvent.js"></script>

9. C Montoya on February 16, 2006

   Can you show me an example page where this has been fixed?

10. Johan on February 17, 2006

    >Can you show me an example page where this has been fixed?
    Get my e-mail with coding example?

11. C Montoya on February 17, 2006

    Yeah, sorry I didn't respond, I got it. Apparently the issue is solved, I'm still testing though. Thanks.

12. Percy on April 19, 2006

    I have found a hack to this problem:

    http://oe.sevenlight.com/entry/2006/04/19/Fix_to_Safari's_FOUC_AdSense_bug

13. C Montoya on April 19, 2006

    Thanks Percy, that looks pretty good.