Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Webkit CSS Shenanigans

Safari Doesn't Apply External CSS Until After Page Load

3:03 am on Apr 5, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
posts: 1526
votes: 0

Howdy, been awhile.

Just figured I'd share a particularly frustrating experience, and the solution. This is quite a short read, but the journey to this was anything but quick.


There was a site that uses Google Maps quite extensively. It displays them, using lots of cute tricks to add markers, overlays, etc.

All was Good. The Lords of Separation of Presentation From Structure Decreed that ALL STYLES SHALT BE SEQUESTERED INTO YON EXTERNAL CSS FILES.

Firefox was happy.

IE5 was happy.

IE6 was happy.

IE7 was happy.

Opera Was Happy.

Safari was not happy.

It would draw the maps in a manner that caused them to have the bottom part of the maps cut off and shown with gray tiles. Since I had been using FF to do most of my debug for the site, and had gotten pretty [s]arrogant[/s] self-assured that my quality was such, and that Google's Quality was such, that only minimal testing was necessary.


I went bananas trying to figure out what was going on. I tried all the Google stuff, I went crawling through Web design communities (including this one), looking for an answer.

None was found.

However, I noticed that one site I had made worked. It seemed to use the same code as the sick one (indeed, I had cribbed off of it).

To make a long story short, I figured out that the problem is that Safari does not apply dimensional information from external CSS (as in linked .css files) until after the page load. The site that worked, constructed the map in the window.onload() event handler. I hadn't done it to fix this issue, it just happened to do the trick.

I found that looking at HTML elements with JavaScript executed before the onload fires returns some pretty whacky stuff. After onload is called, the dimensions are OK.


So, I go and set up my other sites to use onload, and all is well. Yes?


I had one more site, where I got a bit fancy, and used a div innerHTML property to set up a form that included a map. That suffered the same issue as the others, even though it was now being called in the onload handler.

I was forced to fix it by inserting embedded CSS into the structure (yeccchh!). Embedded CSS is applied immediately. I haven't tested inline CSS in the head (yet). I just got done rewriting this stuff, and I really don't feel too ambitious right now.


In Safari (I assume Webkit browsers in general, like Chrome, iCab and OmniWeb), you can't count on CSS being applied to a DOM element until after a page has loaded. This isn't usually a big deal, unless you are executing inline JS that depends on the CSS (like Google Maps). I'm not sure if this applies to all CSS properties and styles, or just some (like offsetHeight/Width).

I'm really surprised that I didn't find anything else out there about this. I assume that it would affect a lot more than Google Maps. It was a heck of a long debug session, and made me go "d'oh!" when I figured it out.

Just figured I'd mention it here, so there is a record of it out there.

4:51 pm on Apr 5, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
votes: 0

That sounds painful, indeed! Thanks for sharing! :)

And it is not just an issue of FOUC?

[edited by: DrDoc at 4:52 pm (utc) on April 5, 2009]

5:41 pm on Apr 5, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
posts: 1526
votes: 0

It may well be so, although I always thought FOUC was a "feature" of IE, not WebKit.

I suspect that it isn't encountered that often because people tend to execute JS after page load, or do dynamic DOM construction (I'm not sure whether or not dynamic construction in which we change the className will suffer the same problem).

Weird "bug" (probably not actually a bug. I strongly suspect it is within spec). Since it was so frustrating, I figured I'd mention it here.