Menu
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.
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.
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.
I've tried a few different things, to no effect:
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?
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.
So this leads me to believe that there is some issue with how the CSS is being loaded.
Here is my HEAD code:
<!DOCTYPE html> <head> <!--<meta name="robots" content="noindex" />--> <meta charset="utf-8"> <meta name="description" content=""> <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" /> <title></title> <!-- responsive stylesheets --> <link rel="stylesheet" href="resources/css/320.css" type="text/css" media="screen and (max-width:320px)" /> <link rel="stylesheet" href="resources/css/480.css" type="text/css" media="screen and (min-width:321px) and (max-width:480px)" /> <link rel="stylesheet" href="resources/css/768.css" type="text/css" media="screen and (min-width:481px) and (max-width:768px)" /> <link rel="stylesheet" href="resources/css/960.css" type="text/css" media="screen and (min-width:769px) and (max-width:960px)" /> <link rel="stylesheet" href="resources/css/960+.css" type="text/css" media="screen and (min-width:961px)" /> <!-- custom fonts stylesheet --> <link rel="stylesheet" href="resources/css/fonts.css" type="text/css" /> <!-- favicon --> <link rel="shortcut icon" href="resources/images/ui/favicon.ico"> <!--[if lt IE 9]> <link rel="stylesheet" href="resources/css/960+.css" type="text/css"/> <![endif]--> </head> WTF is going wrong with Firefox? It's driving me nuts!
220
In an attempt to avoid unstyled content, front-end developers may choose to hide all content until it is fully loaded, at which point a load event handler is triggered and the content appears, though an interruption of loading might leave behind a blank page, to which unstyled content would be preferable.
A FOUC occurs when the browser loads the content or, technically speaking, the HTML of the site before it delivers the styles (CSS) – this causes you to see the raw, un-styled pieces of information whilst the server is still delivering the styling files, thus causes the site to “FLASH” and after that; VOILA the site ...
If you add a dummy <script> tag right after <body>, Firefox will show the page after all the css from <head> is loaded:
<body> <script>0</script> <!-- rest of the code --> </body> There is an official bugreport about this FOUC (Flash Of Unstyled Content) on the Firefox site: https://bugzilla.mozilla.org/show_bug.cgi?id=1404468
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
