Given its relative new-ness of implementation, I hadn’t put the CSS
opacity property through its paces yet. I found a situation today where it seemed to fit, and was a little surprised by the results.
Seems that of the three browsers that attempt to support it, only Opera really does it justice. Check out this test page and you’ll see what I mean. Hover the image to see the effects I’m describing:
- Firefox 2.0 and Camino
- The heading and paragraph appear to be oddly affected by the
opacityproperty, but on hover they restore their proper values. On first glance it appeared they were picking up the image’s
opacityvalue of 0.8 as well, but when I bumped that down to 0.1 they didn’t adjust accordingly. So it seems more like the anti-aliasing level is different between normal and hover states. There’s no logical reason for this, it’s a big old bug, and I suspect somehow related to Gecko’s poor italic handling due to both possibly being the result of poor anti-aliasing handling.
- Well, it just plain freaks out. As you move the mouse over the image, it flashes between visible and… not so much. The actual hover
opacityvalue doesn’t even apply. Weird.
Shame. IE7 just gave us PNG opacity, but we’re going to need this one too. I see them as flip sides of the same coin.
: Whoops, guess I should clarify, this is OS X only.
: Check out this revised example. A few commenters pointed out that setting the
opacity value to 0.9999 instead of 1 would alleviate the problem, and it did the trick in both browsers. Though not ideal, it seems like a relatively harmless and future-friendly trick to enable
opacity today. Yay!