Fixing jQuery's Opacity in Firefox

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

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:

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.