Has IE7 Broken CSS Filters?
I've noticed that text becomes difficult to read when I apply opacity or a drop shadow using a filter in IE7. Here's an image of a menu without opacity applied in IE7.
Notice that because of clear type, the text is nicely rounded and readable. Here's an image of the same menu with opacity applied in IE7.
You can see that the text is pixilated and less easy to read. It seems that if an opacity filter is applied to an element, the element's text is not displayed using clear type, even if the OS is set to use clear type. Here's an image of a div with a drop shadow applied.
The OS is set to use clear type and has been tuned. Firefox on the left uses the OS settings to display the text, yet with IE7 on the right, the the text is very hard to read. IE6 with all its problems at least doesn't mess up text when a filter is applied to an element. I have an open ticket with Microsoft and the support person sent me an email message that told me the way to fix the problem is to not use the drop shadow filter. I don't believe that's a good solution. Has anyone else had problems with filters in IE7?
Add a comment
Discussion for this entry is now closed.