Jump to content


IE 8 Text AutoAlpha Problems

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.