Search code examples
jquerytextinternet-explorer-8addclassblurry

Jquery addclass on hover blurred text ie8

I have a pretty simple add class in jquery that changes the opacity of elements in a div and text color. It works perfectly in Firefox and Chrome but (of course) in IE the text is really blurred and looks terrible

I've validated the page thinking it might be a problem with that, but it still doesn't work properly. It's also not the cleartype option in IE.

Anyone know why this does this?

http://nottingham.subverb.net/test.html

Solution

  • This is because of the DX Alpha filter being used to achieve the opacity effect. It applies to all pixels within the target including those used for font smoothing. (Btw, you won't have this issue with IE9.)

    You could try using a PNG background to achieve the same effect.