title: Flash of unstyled content (FOUC) in Firefox only? Is FF slow renderer?
body: <p>I'm not seeing this issue in any other browser that I've tested - IE, Chrome, Opera - but whenever I load a page from the server, I'm seeing a flash of unstyled content before the CSS is applied.</p>
  
  <p>This is even happening on subsequent page loads where everything should be cached - every time the page loads I see the unstyled content for a split-second, then everything settles in.</p>
  
  <p>It's also worth noting (perhaps?) that the page is using @font-face to pull some Google fonts. They are stored in a separate stylesheet being pulled after the main responsive stylesheets and media queries.</p>
  
  <p>I've tried a few different things, to no effect:</p>
  
  <ul>
  <li>Rearranging order of CSS stylesheet links</li>
  <li>Removing link to stylesheets with @font-face</li>
  <li>Disabling Firebug? (Read on here somewhere...)</li>
  </ul>
  
  <p>One other thing that may be worth mentioning is that I used quite a lot of Element Type CSS selectors in the page's CSS. Is it possible that this is slowing down the rendering process?</p>
  
  <p>This seems unlikely as there is no problem immediately re-rendering the page upon changing the dimensions of the window - the responsive stuff renders fine immediately.</p>
  
  <p>So this leads me to believe that there is some issue with how the CSS is being loaded.</p>
  
  <p>Here is my HEAD code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;!--&lt;meta name="robots" content="noindex" /&gt;--&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="description" content=""&gt;
  &lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" /&gt;
  &lt;title&gt;&lt;/title&gt;
  
  &lt;!-- responsive stylesheets --&gt;
  &lt;link rel="stylesheet" href="resources/css/320.css" type="text/css" media="screen and (max-width:320px)" /&gt;
  &lt;link rel="stylesheet" href="resources/css/480.css" type="text/css" media="screen and (min-width:321px) and (max-width:480px)" /&gt;
  &lt;link rel="stylesheet" href="resources/css/768.css" type="text/css" media="screen and (min-width:481px) and (max-width:768px)" /&gt;
  &lt;link rel="stylesheet" href="resources/css/960.css" type="text/css" media="screen and (min-width:769px) and (max-width:960px)" /&gt;
  &lt;link rel="stylesheet" href="resources/css/960+.css" type="text/css" media="screen and (min-width:961px)" /&gt;
  
  &lt;!-- custom fonts stylesheet --&gt;
  &lt;link rel="stylesheet" href="resources/css/fonts.css" type="text/css" /&gt;
  
  &lt;!-- favicon --&gt;
  &lt;link rel="shortcut icon" href="resources/images/ui/favicon.ico"&gt;
  
  &lt;!--[if lt IE 9]&gt;
  &lt;link rel="stylesheet" href="resources/css/960+.css" type="text/css"/&gt;
  &lt;![endif]--&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>WTF is going wrong with Firefox? It's driving me nuts!</p>