Recently, while working on an ecommerce site. I ran into a problem where everytime an element had its opacity set to anything less than 100 percent, the text on the page would seem to dim on Firefox for Mac. Upon closer inspection, I realized the text wasn’t changing opacity or color, but rather, the aliasing itself seemed to be changing - similar to what you see in Photoshop if you change the aliasing of text from strong to crisp.

After pulling my hair out for a couple of hours, I hit mailing lists in search of an answer. Luckily Thomas Fuchs of Script.aculo.us fame was listening:

“I think you’re experiencing a firefox bug here, that is it switches from the Mac OS X-native text antialiasing to it’s own antialiasing when the opacity less then 100% — which produces inferior results. Plus, the rendering engine, in some situations, seems to extend this to other, non-related elements.”

Armed with this new knowledge, I was able to refine my searches, and dig up corroborating evidence this was indeed the case. Finding an answer to the problem, however, proved to be more elusive.

It turns out the answer is - there isn’t an answer. There are a couple of things you can try, but there doesn’t seem to be any one silver bullet.

  1. If you’re setting opacity in your stylesheet like: 
    div#translucent {
    
filter:alpha(opacity=60);
    
-moz-opacity: 0.6;
    
opacity: 0.6;
    
}
    Try switching it to use Effect.Opacity from the Script.aculo.us library instead: 
    <code> new Effect.Opacity(&#039;translucent&#039;,{duration: 0, to: .6}); </code>
    Or vice versa - if you’re using Effect.Opacity, try switching to the stylesheet method.
  2. It seems that the problem is more widespread when the translucent element is absolutely positioned. If possible try to get the element in place by other means.
  3. Finally, try moving the element to different places in the DOM, and positioning it with css.

None of these techniques are guaranteed to work. Using the above methods, I was able to lessen the effect, but not completely remove it. I was finally able to work around the issue by using a translucent png image for my background, but this was only possible because the element was turned on and off with simple hide and show methods. If you want to use something fancier like Effect.Appear or Effect.Fade from script.aculo.us, you’re could run into this problem again. (because those effects rely on Effect.Opacity).

While this post doesn’t directly relate to the prototype library, I hope it saves some of you a few fruitless hous of debugging. Now go forth, and translute*

* To make translucent - yes, I made it up.

Post Information

Posted by Jason Hummel in Javascript on December 14th, 2006. Subscribe to comments on this article. You can leave a response, or trackback from your own site.

Tags:

We're Reading

Feeds/Syndication

14 Responses to “Firefox for Mac and Opacity Problem”

Leave a Reply