Skip navigation
Currently Being Moderated

Flash of Unstyled Content (FOUC) on Jquery mobile site

Dec 4, 2012 2:45 PM

Tags: #jquery #dreamweaver #mobile #javascript #html5 #cs6

So our mobile website is getting a FOUC on load and any page click. Site is and it happens any time an external css is added to the <head>, code here:


<link rel="stylesheet" href="twt_mobile.css">


I've tried several things like:


1) adding <script type="text/javascript"></script> right before my <link...> (mentioned in this post: - this did nothing


2) replaced <link...> with

<link rel="stylesheet" type="text/css" media="print" href="print.css">

<style type="text/css" media="screen">@import "twt_mobile.css";</style>

as suggested on this website: - still did not help


3) adding the css as an import - looks like this:

<style type="text/css">

@import url("twt_mobile.css");

</style> - did not help


4) I read this page 2X and it is beyond my comprehension what needs to be done: yled-content


Appreciate any insight on the matter!

Thanks, Jenny

  • Currently Being Moderated
    Dec 4, 2012 3:08 PM   in reply to TribJenny

    You could use jQuery on document load to hide the footer or other offending region for a few seconds while scripts and CSS files have time to fully load.   


    Example of jQuery .hide .slide & .fadeIn effects:




    Nancy O.

    Mark as:
  • Currently Being Moderated
    Dec 4, 2012 4:51 PM   in reply to TribJenny

    If you don't have it already, this goes inside your <head> tags:


    <script type="text/javascript" src="">



    This function goes above references to CSS and other scripts in your page.


    <script type="text/javascript">

          $('#header').hide().delay(2500).fadeIn (1000);
    //delay, fadeIn rate in milliseconds. Use higher values for slower transitions//


    Obviously, you'll need to change #header to an applicable ID in your own pages. For example, if you want to hide your #footer ID, use that instead of #header.   If you want to hide a class, use .footer.

    Nancy O.

    Mark as:
  • Currently Being Moderated
    Dec 5, 2012 12:50 PM   in reply to TribJenny

    Sorry the JS didn't work.  I'm starting to think that @media queries and @font-face rules are simply causing some browsers/devices to puke.




    Nancy O.

    Mark as:
  • Currently Being Moderated
    Dec 12, 2012 4:15 PM   in reply to TribJenny

    Glad to hear you sorted this out.


    Nancy O.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points