July 3, 2008

Firefox 3 Headaches

The long awaited Firefox 3 was released recently. It contains a lot of great new features, but it’s been a bit of a headache for a few web developers. When a browser update causes us to have to go back to old sites and make updates to them in order to look their best, that’s annoying, but it goes with the territory.

This article looks at a couple of the problems I’ve run into with Firefox 3, including some strangeness with Javascript, and issues with light text on dark backgrounds. But make no mistake, I’m not a hater — I do think this is the best browser there is. But there seems to be very little information out there about the areas where it’s not so perfect.

Firefox 3 and Type

Everything looks bold on a dark background

The text rendering engine has changed in Firefox 3, and mostly for the better. But there seem to be some instances where things look a lot worse. Specifically, when you have light text on a dark background, as I do on this page. Everything seems to look a bit bold in Firefox 3, but I think it might be specific to the Mac OS X version of Firefox 3. There is not enough visible difference between bold text and regular text, and to my eyes, everything looks a bit bold.

Given that the text looks just fine in other browsers, the only solution I could find was to tone back the color by browser sniffing for Firefox 3. If you are reading this in Firefox 3, then you are seeing the toned back version. I hate having to do this, and browser sniffing is hardly a good practice. But what is the alternative, short of redesigning, or degrading the look in other browsers? I’m not suggesting you do it, but here’s what I did:

A not-so-ideal workaround

With jQuery, detect Firefox 3 with ready event and give our body a class of firefox3 so that we can target it from the stylesheet.

$(document).ready(function() {
    if($.browser.mozilla && parseFloat($.browser.version) >= 1.9)
            $("body").addClass("firefox3");
});

With our CSS stylesheet, use a darker color so that things don’t appear quite as bold in Firefox 3.

body.firefox3 #content {
    color: #e9e9e9;
}

Firefox 3 and jQuery

Jump, Flicker and Flash

With this new version of Firefox, something changed about the way it executes javascript. In jQuery, we use the $(document).ready() function in order to execute code once the DOM is ready. This allows us to manipulate elements on the page before they are drawn.

But with Firefox 3, the ready() event is acting more like a load() event in many cases, at least that’s how it looks. Upon loading a page that is manipulated by a ready() event, we see a quick flash of the page before ready() is executed, and then again after. It’s disconcerting and looks cheap, relative to how it looked in Firefox 2.

There was initially some chatter about it in the jQuery Development group, but no real solution to this issue, which is major (from my perspective). While some workarounds have been mentioned, none of them have worked for me thus far. It appears to be specific to the way that Firefox 3 executes Javascript, and not specific to jQuery.

One way to avoid the “flicker or flash” associated with this problem is to make sure that all of your initial page styling is done by your CSS and not by your Javascript. But this is hardly supportive of using graceful degradation and progressive enhancement best practices.

Example

Lets say you had a tabbed interface, where you could click on different tabs to show different pieces of content on the same page. But if someone viewing it didn’t have javascript, then it would gracefully degrade to show all the content without tabs. Had we defined all the styles associated with the tabs in our CSS file, then we’d be left with a tabbed interface that is unable to gracefully degrade … only the first tab would be visible, without a means of showing the others.

Yes, we could redo our tabbed interface example without javascript, and yes, we we may be able to find some other way around this. But the fact remains that Firefox 3 has created a new problem that didn’t exist before, and web developers have to go back to past code to find a way around this new issue. And for new code, we have to change the way we work, and now structure our code in a way that will make Firefox 3 happy, like we already do with Internet Explorer.

Conclusion

Like any major browser update, Firefox 3 is a different animal than its predecessor (Firefox 2). As most will attest, this is truly a fantastic upgrade to a great browser, and I don’t dispute that. But so far, FF3 has been more headache than friend. I’m certain that most of these will be non-issues before long, but I wanted to write this article entry in case anyone else is searching for similar Firefox 3 issues. If you’ve come across any good solutions, please let me know. I’m planning to update this article with solutions to these issues as they are found.