Firefox 2 on Mac: jQuery Anti-Aliasing/Opacity Bug

In the ideal scenario, what works on one browser will work on another. Unfortunately, this is never the case. In reality, all browsers have their own little bugs which cause them to render elements improperly. In this bug report, we highlight a little issue that popped up with Firefox 2.0 on Macs.

The Problem: Text Appears to Dim or Get Bold

When you use jQuery, the popular JavaScript library, for animated effects that change the opacity of an element, the rest of the text on the page can be affected such that It appears to dim or get bolder. This happens because the use of the opacity filter triggers Firefox to switch from the operating system’s method for anti-aliasing text to its own internal method.

If you are wondering why you haven’t noticed this problem before, it is because the problem is typically only noticeable when light-colored text is on a dark background AND it when viewing a web page on Firefox 2.0 on the Mac operating system. (Other versions of Firefox are not affected by this bug.)

The Solution: Set Opacity using jQuery or CSS

The solution to this problem is fairly simple. All you need to do is set the opacity of all text elements. The easiest way to do this is to simply apply an opacity value to the body tag as shown in the two equivalent code samples below. (Either of the samples would fix the problem.)

CSS

body { -moz-opacity: 0.9999; }

jQuery

$('body').css('opacity', 0.9999);

Alternatively, you could also target a certain element or tag. To do this, you’d simply replace
body

in our sample with the id (#sampleid) or the tag name.

And that’s it. Your text should be back to normal.

Interested in more bug fixes? See our article: Safari and Flash Don’t Play Well Together.