IE7, ClearType, DXImageTransforms and Fade Animation Fuzziness
A while back I wrote a post about adding animation effects to the AjaxControlToolkit's Tab control. The demo I created for the post used the toolkit's FadeIn animation to fade the selected tab into view as it became active. I thought this turned out pretty well, however I noticed that after the fade animation finished running the tab's text contents remained a little blurry.
Compare the before and after.
To see this for yourself, open the demo page and click on the 'Play Fade Animation' button at the top of the screen. Notice how the text looks a little blurry after the animation runs?
Ted Glaza responded to that original post and provided a hint as to what might be causing the problem
The problem you're seeing with the FadeIn animation has to do with how IE and ClearType work together. Searching "IE ClearType Opacity" should provide more details. - Ted Glaza
This week I found some time to look into this. I followed Ted's advise and did a little searching. Here is where it took me ...
What Is ClearType?
Its a Microsoft technology that aims to make text a bit more readable. I used the resources below to get familiar with the details.
How Does The FadeIn Animation Work?
When setElementOpacity is called, the first thing the function does is check for the existence of the element argument's filters attribute, if it doesn't exist, it sets the element's opacity style attribute to the supplied value. For most browsers, this is the path that is taken. However, if the filters property is defined (IE only) the Alpha DXImageTransform filter is applied to the element.
Why Does My Text Look Fuzzy After The FadeIn Animation Runs In IE7?
Well, it turns out there is an issue with DXTransforms and ClearType in IE7. According to the IE Program Manager for ClearType
During our testing we noticed that DXTransforms are sometimes applied to elements that contain text (now rendered in ClearType). As our users also noticed, the ClearType text then looks extremely blurry - unfortunately these two technologies just don’t mix well. This is because the basic convolution transform used by DXTransforms does not take into account the spatial nature of ClearType.
To ensure good readability of Text in IE, in the Release Candidate build we decided to disable ClearType on elements that use any DXTransform. We will render the text in those elements as aliased text, in order to increase readability. The rest of the text in the page will render with ClearType. This may explain why some sites (or portions of sites) will render as aliased text, rather than ClearType.
So there you go, in IE7, the FadeIn animation (and everything else that calls setElementOpacity) uses a DXTransform to set opacity. DXTransforms and ClearType don't mix well in IE7, so the IE7 team chose to disable ClearType on elements with a DXTransform.
The bottom line ... My text looks fuzzy because it isn't being rendered using ClearType.
Are There Any Workarounds?
Workaround #1: Use removeAttribute to Clear the Filter
This works pretty well, but there is a little bit of a glitch. While the FadeIn animation is running, ClearType rendering is turned off because a DXtransform is applied. Then my removeFilter function runs and removes the filter causing the text to immediately sharpen. If you look closely you can tell when this happens because the letters appear to widen.
Workaround #2: Apply the FadeOut Animation to an Overlayed DIV
This worked great - no fuzziness and the underlayed element keeps its ClearType rendering throughout the animation. It does require a bit more work as you will have to keep track of creating, sizing and possibly some other attributes of the overlayed element, but I thought the end result looked pretty good and figured I would share it.
That's it. Enjoy!