IE Text Rendering Over a Gradient

Question

IE 8 and lower render text awfully if it is over any element that has a "filter" applied. Nothing really surprising with that. I usually just avoid using "filter". However, I was doing some testing in IE9 and I noticed a HUGE problem; text that is rendered over any element with a css3 gradient or box shadow applied, the text rendering is destroyed. Not just for the text directly on top of the element, but every element that is above the gradient in the z-index. For example, if I define the background of my page with a gradient, cover it in a solid white div and then render text on top of that, it is still terrible. I'm really hoping that this is just a beta issue that will be addressed in the final release. I've been using the code here, for gradients for awhile (minus the filter), but now in IE9 all of the pages that use this technique look horrible. Does anyone know anything about this- I couldn't find anything about this issue when I googled it.

Answer 1

Four years later I think it's safe to say this was a beta issue.

Opening the example in IE 8 there are no noticeable problems except for the always-crappy antialiasing in IE 8 on platforms like Windows XP.

A lot has changed.