Jump to content


PNG Transparency in IE

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

I'm rotating and tweening the top and left positions of several img elements (transparent .pngs of rounded rectangles that have a slight drop shadow). Everything is working perfectly in all browsers except IE(7&8) renders the "dropshadow" area of the pngs as a solid black.


I've tried several hacks like: http://snipplr.com/v...deview&id=46458 and http://snipplr.com/view/7903 but nothing seems to work.


It's notable to mention that if I remove the rotation from the elements, they render fine in IE.


Any help would be greatly appreciated!



PS - Thank you so much for porting this library to JS!!!

Link to comment
Share on other sites

That sounds like an IE (version 8 and earlier) issue that [as far as I know] can't be solved. Applying transforms like rotation/scale/skew can only be done by applying a filter in those old versions of the browser because they don't support regular CSS3 transforms and it sounds like the browser has a problem with semi-transparent PNGs when applying filters. If anyone knows of a solution, I'm all ears. See http://forums.greensock.com/topic/6226-tweening-css-alpha-on-text-with-dropshadow-filter-in-ie9/page__hl__black

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.