A Single Article

Read it, comment, and share it with your friends

Safari FOUC [not] Defeated

Posted October 13 in Design.

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!

Meta

Useful things

Check This

and support what I do
Future of Web Design 2008

Related Articles

These just might ring a bell

Get a Trackback link

13 Comments

Responses to my article
  1. Andrew 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 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 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 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 February 15, 2006

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

  6. C Montoya February 15, 2006

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

  7. Johan 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 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 February 16, 2006

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

  10. Johan 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 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 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 April 19, 2006

    Thanks Percy, that looks pretty good.

Leave a comment

Share your thoughts with the world

You can use Markdown, or you can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Please keep comments respectful and on topic.

This form is guarded by Akismet, so don't waste your time trying to submit spam. It won't work. Ever.





Stay on top of new updates at this site: Subscribe to the Feed!