7 Replies Latest reply: Dec 12, 2012 4:15 PM by Nancy O. RSS

    Flash of Unstyled Content (FOUC) on Jquery mobile site

    TribJenny Community Member

      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:

      http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content

       

      Appreciate any insight on the matter!

      Thanks, Jenny