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. FirefoxThis 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.

Tags: , , , , ,

4 Responses to “Firefox 2 on Mac: jQuery Anti-Aliasing/Opacity Bug”

  • Ben Pei January 17, 2009 at 8:33 pm

    Are you using a mac shirley?

    • Velvet Blues January 17, 2009 at 8:44 pm

      No, I try to stay as far away from Mac as possible!

      But I do test websites on Macs as well as PCs. This problem is only seen on Macs.

  • Michael January 30, 2009 at 11:28 am

    Arrrgghhh dude you just saved my life, thanks. But when I do eventually die and they perform an autopsy on me and they ask the Coroner what was the cause of death. He’ll say browser and platform website rendering incompatibilities, thats what he died of.

    • Velvet Blues January 30, 2009 at 10:42 pm

      Yeh, its ridiculous how much time we developers spend troubleshooting all of the random quirks in browsers. Life would be so much easier if browsers rendered HTML, CSS, Flash, and JS properly!

Trackbacks

Trackback URL:

Leave a Reply

Want us to work on your project?

Contact us today for a quote. Click here to submit details regarding your project.

If you are making a general inquiry, send an email to info@velvetblues.com

Go Daddy Deal of the Week: Cheap .COM Domains! Offer expires soon!