Amazing Safari Detail

Every day I learn something new about web design. Over the last two weeks, I have watched a site that I’d designed malfunction on one browser: Safari. Now, all of the "real" programmers out there are laughing at me, because nothing crashes on Safari. Safari is supposedly the most compliant browser in the interuniverse — or so the ones in the know told me. Over-and-over.

I had one tiny little bit of Javascript code on the page, which made use of the Mootools 1.2 framework. (Note my use of the most up-to-date mootools javascript library at this time.) My tiny little script was the same one as I had running on a different site — and that site ran fine. Not so the carpet of doom. When you look at the site, you’ll see it is ripe for destruction. The site involves an absolutely positioned box with non-scrolling content. Inside the box are all sorts of little boxes — hit refresh and you’ll see the colors change. Yes, I was insane when I thought of it.

But there were such good reasons to do it this way. First of all — it was fun! and colorful! It fit the personality of this brilliant artist, capturing the multiple facets of her work in an easy to update Joomla format. Yes, that’s a Joomla site, folks.

And I know, there are full-page loads. Don’t shoot me. It’s accessible — highly accessible — and it degrades pretty well. (OK, so not so good yet, but I’m working on getting it to work on IE<6.) Right out of the box it was pretty and fun. Except that it is supposed to be an educational site and many of the people coming to visit it were teachers. Teachers are often on Safari.

On Safari, my lovely center box would morph (ala moo) into the larger box to display the content — and then commit div suicide  by leaping off the bottom of the non-scrolling page. HUH? Where’d it go? I’d open another link and it would peek up just enough to show me that it was working properly…before leaping away into non-existence.

I nearly went bald pulling my hair out.

I turned to the "professionals" for help — you know, the full-time programmers who don’t have to chase a 4 year old munchkin and manage an aircraft maintenance facility while indulging in the creativity of web design. They said a variety of non-helpful things. Pointed out the page loads. Suggested that if I’d just use a non-accessible script like everyone else all would be fine. Hm. Then I was told, "well, if you wanted accessibility you should have designed it differently." But…I liked this design. The client LIKED this design. Who says accessible can’t be fun?

Besides…it worked on IE6. It worked in Firefox. It should work in Safari. About that point was when I went to the other site and tested it in Safari. Hm. Same script. Worked fine. Well, then, it couldn’t be the script, right? But it could only BE the script. Nothing else would cause that error. After days of criticism, one kind programmer by the name of Ian Beck jumped in to offer me some real help. He sent me the following very useful bit of information:

I’ve only glanced at the page, so this might be totally off, but is
the code that’s screwing up relying on Element.Dimensions?  If it is,
then you need to load your initialization code in the onload event
instead of ondomready for Safari to work consistently (my past
experience is that it will work very rarely, possibly because
information is cached during testing).  For some reason dimension
information is present on domready for the other browsers, but Safari
doesn’t calculate it until onload.  If this is indeed the problem,
you’ll just need to use this instead of the standard ‘domready’ event:

window.addEvent(‘load’, function() { … });

Of course, since onload fires a little later than ondomready, you’ll
probably only want to stick the Element.Dimensions-reliant code in
there.

Good luck!

Ian

I changed one word in the code — domready — to "load" and all was happy and worked perfectly. Because of the amount of effort I had to put into FINDING that informaiton, I thought it would be best to write a little blog about it. The more times Ian’s excellent insight is repeated on the internet for the search engines to serve up to others in the same position of insanity I found myself in, the less site designers will be seen running screaming through heards of cattle.