Fixing jQuery’s Opacity in Firefox

I think jQuery has uncovered a flaw in Firefox’s rendering:

Postbox Half Opacity No Background

This is a screenshot of Postbox‘s website mid-transition. (Actually, I used Firebug to manually set opacity to 50%.) They’re using $.fadeOut() and $.fadeIn() to transition between tabs on their features page. For some reason, Firefox has a lot of trouble with this, and ends up displaying strange green artifacts where there should be partially transparent text. (I’m completely guessing, but it looks to me like it might be related to ClearType.)

Fortunately, it’s easy to fix. The problem only occurs when the element being faded out or set to partial opacity has a transparent background, set explicitly via background: transparent; or implicitly by not having a background defined at all. To fix, you just have to specify an appropriate background, often background: white;. In this case:

background: white url(http://postbox-inc.com/-/img/bg-content.png) bottom center repeat-x; 

Does the trick:

Postbox Half Opacity

Much better.

Update: Seems as if Safari 4 on Windows has the same problem, which is also fixed by setting the background. Chrome and, surprisingly, IE don’t seem to have this problem.

4 comments on “Fixing jQuery’s Opacity in Firefox

  1. Amazziiiiiiiiiiiiiiing. The fix is working great. Seems like this bugs only appears on Windows Vista (x64) + Firefox, XP seems to handle it correctly. You just saved me 10 hours of frustration. Cheers

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>