IE, butters text after filter is applied

In my little world IE8 usage over took IE7 for the first time last month, so decided to try to sort out my JavaScript fades which I disable for IE. The problem with the fades is after the fade in ends the text is blurred, fuzzy and generally butters!

TODO: add image of butters text...

I haven't looked into this in any great depth, but the problem seems to be with clearType text in IE and obj.style.filter. If you apply the Alpha(opacity) filter the text gets mashed up, so setting obj.style.filter="Alpha(opacity=100)" breaks the anti-alias on text.

One work around is to set a background colour on the element your going to apply a filter to. If you don't know which elements your going to fade in advance you can reset the filter after the fade has run, which isn't ideal but better than nothing.

I user a method similar to the bellow for setting opacity

/** @id Transition.SetOpacity */
function SetOpacity(el,opacity){
    opacity = (opacity>=100)? 100 : opacity;
    el.style.opacity   = (opacity / 100); 
    el.style.MozOpacity  = (opacity / 100); 
    el.style.KhtmlOpacity  = (opacity / 100); 
    
    // private method to set opacity in IE
    setIEOpacity(el,opacity)
  
    function setIEOpacity(el,opacity){
        if (!el.currentStyle.hasLayout){
            // give element layout
            el.style.zoom = 1;
        }
        if (!el.originalFilter){
            // save the original filter, if one exists, so you can replace it after fade 
            el.originalFilter = el.currentStyle.filter || 'none';
        }
        // if opacity = 100 put the original filter back
        el.style.filter = (opacity == 100) ? 
            el.originalFilter : 
            'progid:DXImageTransform.Microsoft.Alpha(opacity='+ opacity + ')';
    }
}

NB. for a fade to work in IE at all, the element needs to have layout (obj.currentStyle.hasLayout) this is a read only attribute, to set it to true you need to give the element a style that will trigger it to set .hasLayout to true. I normally set the zoom style to 1 in an IE only stylesheet. For other ways of tringering hasLayout see haslayout.net