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.

ie7elementwithoutopacity.gif

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.

ie7elementwithopacity.gif

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.

ie7elementwithdropshadow.gif

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?

15 Comments

Gravatar Image1. Posted at 6/1/2007 9:53:39 AM by Tanny O'Haley

I just found out that Microsoft has disabled clear type when filters are applied to an element.

Notes on the interaction of ClearType with DXTransforms in IE7

Also, from an email that I received from Microsoft support.

I checked with our IE developer regarding the issue we worked on with fonts in IE7. They confirmed in IE7, they intentionally disabled cleartype on elements with filters set because the filters interfere with the cleartype.

The workaround remains to what I have suggested, which is to remove filters where the problem shown on the elements.

This seems to me to be a sledge hammer approach to fix a problem with some filters. I have used opacity and drop shadow filters for years and have never experienced interference with clear type text. This is a step backwards. Microsoft should fix this problem. Maybe even supporting the opacity rule in CSS instead of using a filter.

Now I know that there is some discussion (intense and very passionate arguments actually, I was just trying to be nice) regarding the relative merits of clear type. I happen to like clear type on an LCD monitor. A co-worker of mine does not. He thinks it looks blurry. I don't know if it really does look blurry for him or if it is because he is color blind and the colors used to make clear type text readable make the text look blurry to him.

Whatever your opinion, I think that IE7 should follow the OS settings. If I the user have turned on clear type, then IE7 should use clear type. If I have turned it off then IE7 should not use clear type.

Please do not comment on the merits or lack of merits of clear type. Please keep this discussion focused on whether or not Microsoft should render text based on the operating system settings and fix filters too.

Thank you.

Gravatar Image2. Posted at 6/26/2007 9:31:04 AM by Martin

I do not like clear type. I think it is blurry and difficult to read. I actually get a headache when looking at so called "ClearType" as my eyes are constantly trying to being it into focus. End of Rant.

Saying that, I do think Microsoft should render text based on the operating system settings and fix filters too. It would make my life as a web developer a lot easier.

It is a real pain to find and implement hacks & work arounds in order to render gradients and opacity without having to use a filter in order for the ClearType to render...

Gravatar Image3. Posted at 11/21/2007 9:07:28 AM by David

I have just come up against the same problem in IE 7 when I applied a javascript opacity filter to something. This is a nice explanation of the problem, so thank you for posting your research.

By the way, I love ClearType. Anybody who does NOT think ClearType looks good on their monitor needs to use the ClearType Tuner Wizard provided by Microsoft. It's web-based, takes 10 seconds, and you will get crystal clear results when you're done:

{ Link }

Gravatar Image4. Posted at 12/7/2007 12:30:21 PM by u brain

I've just had a right nightmare with this issue so thanks for this because I didn't have a clue what was going on.

My site, { Link } is a forum for skiers and snowboarders and having put in a little bit of transparency using the opacity filter, I had people moaning about non-existent changes to fonts and saying that the text was harder to read. It was a while before I realised the problem was limited to IE7 and even longer before I realised it was filters v's ClearType.

Thank you!

Gravatar Image5. Posted at 2/23/2008 11:18:44 AM by Debbie

I found a fix that I've been using on a few of my sites. Surrounding the text that is affected by cleartype issues in IE7, add a div with position:relative either by adding a class to your CSS:

.classname { position:relative; } and then use that in your html -- <div class="classname">text</div> OR

inline -- <div style="position:relative;">text</div>

That's all I did and all my text renders perfect with cleartype. Hope this helps someone else.

Gravatar Image6. Posted at 2/23/2008 12:39:02 PM by Debbie

One additional note to above ... if you find that the style class added to you css external stylesheet does not work on all elements, try locking it to "div":

div.classname ......

I found a few spots where adding the div class from external css did not work until I changed this.

Gravatar Image7. Posted at 2/25/2008 4:56:50 PM by Debbie

More testing reveals that the div trick I posted above may not work on ALL filters or in ALL situations. I can get it to work on gradient and blur, but opacity and dropshadow still display crappy. In addition, I found one page where I could just not get the little trick to work at all no matter what I did. Appears that if this works, great and if not, too bad. Hope this helps some folks out there to fix at lease some of the display issues with filters. Hopefully M$ listens to the users and lets updated versions of IE just use the system-wide settings (regardless of what they are) the USER has chosen. It's what they should have done in the first place.

Gravatar Image8. Posted at 8/1/2008 12:58:58 AM by Bluedevil

Thanks for the heads up. Was wondering what the heck was going on with this. I tried the position:relative hack and had no luck when using a gradient filter. Oh well. No big loss. I just shut it down and moved on until MS can pull it together. Thanks again.

Gravatar Image9. Posted at 10/15/2008 1:47:02 PM by alis

hello

I need a filter broken

thanks fore help

Gravatar Image10. Posted at 3/16/2009 9:31:37 AM by mishii

IE makes me sick, workaround here and fix there, I just don't get it...

Gravatar Image11. Posted at 6/8/2009 6:36:45 AM by Rahul

Hi all,

I have a client that is using IE 7 and getting no css gradients on the site. Is there a particular version of IE that turns off gradients(or all css filters) when cleartype is enabled?

Gravatar Image12. Posted at 11/4/2009 3:17:13 AM by ozzysong

Explorer just sucks...

Gravatar Image13. Posted at 12/2/2009 11:24:11 AM by Anne

Same problems with clear type. Good grief IE, when are you going to get it right? It's always IE that gives me a headache, the other browsers are working just fine with standards compliant code. What a pain in the neck. I would avoid IE altogether, only I have clients who's intranets are on IE6 and IE7! The time I've spent writing workarounds for IE, I should send them an invoice for billable time spent fixing their stupid browser bugs, and pain and suffering! ;p I'm serious.

Gravatar Image14. Posted at 3/23/2010 4:56:35 PM by SEO Agency

I have been researching this for a solid hour now

Lots of approaches but when actually testing it out none of them work the way expected

Hopefully when IE9 is released all this will be a thing of the past eh.

Gravatar Image15. Posted at 4/9/2010 9:19:33 AM by Edward

I've been reserching too, like #14. After reading this and other comments saying that IE still does the thing and there is no solution in the near horizont, I've opted for a workaround.

What I have done is making 2 markups (<p> or <span> or <div>) inside a wrapper markup. One for the shadow and another one for the content using position:relative and top/left properties for the effect.

Hope this helps!

Add a comment

Discussion for this entry is now closed.