buckyschwarz.net

I ran into an issue with Safari and jQuery 1.3 today that had me stumped. To keep things unobtrusive for the folks on the web who don’t have JavaScript enabled (and to keep current with good practices since no one except my girlfriend visits my site), I had a form which wasn’t needed if JavaScript was disabled hidden using the display: none property in the site’s main stylesheet. In the $(document).ready() handler for jQuery, I set the form to be visible using the show() method (which, to my understanding, set the display: property to block).

This worked fine every time in Firefox 3 and IE7, but in Safari, I noticed some strange behavior: Occasionally it would work like expected, but most of the time the form would stay hidden. It seemed the only times it did work were when the actual page load took longer to load than the stylesheets and scripts.

The following image shows the Safari Web Inspector when the strange behavior was occurring:

This image shows the Web Inspector when the normal behavior was occurring:

In all of the cases where the page behaved as expected, the page would finish loading after the stylesheets and scripts. I’m not really sure what this means, but it seemed like when the strange behavior was happening, the page would load, jQuery would show the form, and then the stylesheet would load and hide the form. I spent several hours searching for an answer to no avail.

The fix came when I changed the jQuery code. Instead of using the show() method, I used the css() method to change the css property, display: block. This fixed the problem in Safari, and did not introduce any strange behaviors in Firefox or IE7.