7 Replies Latest reply on Dec 12, 2012 4:15 PM by Nancy OShea

    Flash of Unstyled Content (FOUC) on Jquery mobile site

    TribJenny Level 1

      So our mobile website is getting a FOUC on load and any page click. Site is m.whitewatertours.com 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: http://forums.adobe.com/message/3800999#3800999) - 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: http://www.bluerobot.com/web/css/fouc.asp/ - 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:



      Appreciate any insight on the matter!

      Thanks, Jenny