Problems with opacity in Internet Explorer
Here’s a strange one I came across the other day. I’m posting this in the hope that I’ll save someone out there some time in the future.
I was applying a fade-out effect to a news ticker, and all was going well (thank you Yahoo! User Interface library!) until I was ready to test in Internet Explorer. Unfortunately, as soon as the second news item was displayed, the text suddenly gained a strange border effect (perhaps a glow or halo effect might also describe it - but it isn’t pretty).
This is very easy to replicate in IE (either 6 or 7). Just apply filter:alpha(opacity=50); to some text and take a look. It’s worth noting that while this effect shows on any text on my Windows computer, it turned out to only do it for bold text on some. It’s possible that Microsoft’s ClearType font smoothing has somthing to do with this, but I have not looked into this in any detail.
At first I wasn’t concerned - I simply applied position:relative to the item with the opacity (this being a solution I’d come up with for a similar text effect in the past), and sure enough the text now looked fine.
However, I wasn’t yet done, it turned out: now the fade effect didn’t happen. My text changed from one item to the next, but did it instantly. I played around with the styling for a bit with no effect before the realisation that perhaps background colour might be the key - and sure enough, setting a background colour (but not transparent) solved it.
I mentioned having had a similar effect happen in a different situation. In that case, I wasn’t doing anything with opacity, but was showing and hiding different blocks of text within the same area of the page. I haven’t tried out specifying a background colour for that problem, but position:relative worked just fine, so my advice is:
If you get this border effect on your text, first try applying position:relative or set a background colour if that doesn’t work.
You just solved my problem. TD with opacity set to 50% in IE causes all child elements to have 50% opacity so input fields are all washed out. Setting position:relative on the first child of the TD (a DIV in this case) causes all of its children to have 100% apacity. Thanks!
Comment by Patrick — June 5, 2008 @ 10:22 pm