IE 8 Text AutoAlpha Problems

[Kablasto]

Currently I'm attempting to use autoalpha on a div containing text but have found that once the tween has completed the text doesn't have any aliasing applied to it.  Is there any way to fix this?  Do I have to remove the filtering completely somehow?  I'm currently testing in IE8, as it works fine in Firefox and Safari.  Thanks in advance.

[jamiejefferson]

This is unfortunately just how IE8 renders opacity. <= IE8 uses Microsoft's proprietary 'filter' style, while other browsers use 'opacity'.

 

If you are tweening to autoAlpha:1, GSAP is smart enough to remove the filter at the end of the tween to restore the nice anti-aliasing.

 

If you tween to a value less than 1, the filter is left on to retain the opacity.

 

There doesn't seem to be a reliable way to have the text both semi-opaque and anti-aliased, so your best course of action is to either tween to autoAlpha:1, or live with the ugly text in IE8. If you force-remove the filter (e.g. TweenLite.to(element, 1, { autoAlpha:0.5, clearProps:'filter' }) ) then the opacity will jump up to 1 anyway, so you may as well smoothly tween it all the way there.