FOUC Mac: something to note

A problem with a clients’ site yesterday reminded me something… sometimes it’s not about what’s there, but what’s not there.

Simple, huh?

A client was reporting a problem where their site wasn’t displaying properly in Internet Explorer for Mac – typical! I thought it was probably a CSS problem, or maybe I’d missed a check for IE for Mac in my JavaScript.

I checked the site and it was taking pretty much exactly 3 minutes to load each page. I commented out my main style sheet and the JavaScript file. The problem was still there. Hmm…

I eventually commented out most of the head to find out that the problem was with the blank print style sheet I put in to avoid the flash of unstyled content (FOUC) in IE on Windows, at least, until I got around to doing a print style sheet.

I’m not sure how many times I’ve stumbled across and read Dave Shea’s CSS cribsheet but down there near the bottom is this:

Don’t link to empty style sheets as ‘placeholders’ for future style sheets (like handheld or print media style sheets).
Mac IE5 chokes on the empty style sheet and the page load time increases. Instead, have at least one rule (or perhaps even a comment) in the style sheet so that MacIE doesn’t choke.

Heh – a bug in IE for Mac which does not tolerate an empty style sheet, an empty style sheet being a fix for a bug with IE for Windows. Go figure!

What to do?

Well, that’s easy: follow Dave’s advice. If you’re not ready to write your print style sheet yet, just putting a comment in the file fixes this issue.