Mezzoblue
13th Dec 2006, 02:05 am
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 (http://mezzoblue.com/tests/opacity/) and you'll see what I mean. Hover the image to see the effects I'm describing:
Firefox 2.0 and CaminoThe heading and paragraph appear to be oddly affected by the opacity property, but on hover they restore their proper values. On first glance it appeared they were picking up the image's opacity value 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 (http://www.zeldman.com/2006/11/27/safari-beats-firefox/) due to both possibly being the result of poor anti-aliasing handling.SafariWell, it just plain freaks out. As you move the mouse over the image, it flashes between visible and... not so much. The actual hover opacity value 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.
Update: Whoops, guess I should clarify, this is OS X only.
Update 2: Check out this revised example (http://mezzoblue.com/tests/opacity/index2.html). 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!
More... (http://mezzoblue.com/archives/2006/12/12/opacity_bugs/)
Seems that of the three browsers that attempt to support it, only Opera really does it justice. Check out this test page (http://mezzoblue.com/tests/opacity/) and you'll see what I mean. Hover the image to see the effects I'm describing:
Firefox 2.0 and CaminoThe heading and paragraph appear to be oddly affected by the opacity property, but on hover they restore their proper values. On first glance it appeared they were picking up the image's opacity value 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 (http://www.zeldman.com/2006/11/27/safari-beats-firefox/) due to both possibly being the result of poor anti-aliasing handling.SafariWell, it just plain freaks out. As you move the mouse over the image, it flashes between visible and... not so much. The actual hover opacity value 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.
Update: Whoops, guess I should clarify, this is OS X only.
Update 2: Check out this revised example (http://mezzoblue.com/tests/opacity/index2.html). 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!
More... (http://mezzoblue.com/archives/2006/12/12/opacity_bugs/)