Take the 2-minute tour ×

Festive greetings Stackers. I've done a responsive site with CSS media queries using the respond.js polyfill and html5.js shiv for IE7 and IE8. When I first load the pages in those browsers there's a brief flash of large size text, sometimes in Times Roman, before the proper font styles kick in. Has anyone else seen this issue, or can anyone suggest what I'm doing wrong? I'm not using webfonts. I am sizing fonts in ems. I've tried setting my body font to 10px as well as 62.5%, but it doesn't seem to make a difference. Is this a peculiarity of the Respond polyfill?

Cheers all

share|improve this question
add comment

2 Answers

You're experimenting a FOUC! A Flash of unstyled content. The link contains ways to avoid this; if you're loading your styles asynchronously it may explain why you experiment this moment in the page life where your style isn'ot yet applied to your content. It may be caused by your use of polyfills, and i'd recommend having a throwaway style loaded at the same time as the page in order to minimize it.

share|improve this answer
i love bluerobot –  albert Dec 27 '11 at 13:50
Thanks samy.. interesting page. I'm not using @import and I've got link and script elements in my head, so it looks like the polyfill is producing my FOUC somehow. This guy github.com/Modernizr/Modernizr/issues/286 says Respond.js "needs to load and block from HEAD", otherwise it causes a FOUC. Not sure what they mean by "block", but I'm linking to my respond.js in the head. Hmmm. –  And Finally Dec 28 '11 at 12:40
add comment

Link on your post is broken to me, so I can't see the code.

One possible reason of this behaviour is the method for including external css file. If you used @import try to use <link> element instead and be sure to include all your css file in the <head> element (not in the body)

Another reason could be due to the excessive weight or to the amount of those css file: browser may take a long time to load and parse all the rules so, if your server is enabled for serving compressed contents, try to serve all your css files with the gzip compression (or deflate on oldest apache) and, if it's possible, try also to reduce the amount of css requests (You can see the .htaccess of html5 boilerplate to get a valid example)

If you combine all your css file to one single file, usually gzip compression can work even better than compressing one file at a time.

Last, but not less important, improve the performance of your css rules: use always in-depth specific rules and always avoid generic statements like * { margin: 0; padding: 0 } because the browser generally will take more time to apply this style to the elements

share|improve this answer
Thanks for the detailed advice Fabrizio. The link is OK for me this morning. I'm doing most of the steps you talk about: I'm not using @import, I've combined all my CSS into one minified file, which is served gzipped, and my CSS rules are pretty specific. My CSS file's 25KB minified, which is possibly quite big. I guess I need to go back to see if I can reduce the number of rules. I'm only seeing this problem intermittently. –  And Finally Dec 28 '11 at 12:29
add comment

Your Answer


