homepage Welcome to WebmasterWorld Guest from 54.161.191.154
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Webkit CSS Shenanigans
Safari Doesn't Apply External CSS Until After Page Load
cmarshall

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3885676 posted 3:03 am on Apr 5, 2009 (gmt 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.

IN THE BEGINNING

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.

THE MIGRAINE

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.

A NEW DAWN

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

No.

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.

THE LESSON

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.

 

DrDoc

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



 
Msg#: 3885676 posted 4:51 pm on Apr 5, 2009 (gmt 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]

cmarshall

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3885676 posted 5:41 pm on Apr 5, 2009 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved