Let me say, before I talk about the recent Safari problem I found, that I am a huge fan of animating drop down menu’s in CSS3 and not relying on javascript.
However, historically, before CSS3 my preferred method of drop menus was using the famous Suckerfish technique. However good old IE6 caused issues with this so instead of using the javascript mentioned in the above Suckerfish method, I tended to use the Superfish javascript file, because it was integrated with jQuery and was just easier to include in my Jojo themes. In fact it was just a case of inserting my code snippet into the customhead.tpl file and all done.
On a side note the first time I did this, I only loaded the javascript on IE6. You know, why load something if you don’t need it. Well wouldn’t you know it, the client wanted to know why Firefox didn’t animate the menu like IE did. I now just load it always.
Anyway, back to the point of the post. I have just had my first occasion of having a problem with this way of working in Safari 5, no less. So lets explain the problem.
I had a website that would load it’s horizontal menu fine however if you selected one of the children in one of the drop down menu’s then in Safari 5 (I didn’t test earlier versions), it would render some of the parent top level menu items with no width.
Interestingly, if you just refreshed it fixed it straight away. Still, not a good look.
The solution
So lets cut this long story short. I followed the HTML5 boiler plate example and moved the links to the javascript and the obviously the javascript that calls the menu, to the bottom of the page. Easy as that.
So with very limited (almost none) amount of research and testing on this, my guess is that processing of the javascript before the content and CSS has fully rendered is what caused this. Interestingly Chrome didn’t have the issue, so I ask you, is this a purely speed thing? Is Safari starting to get too fast for itself? Or is this the future of web development and we do now need to start paying more attention to loading the javascript last when doing progressive enhancement?