Jump to content


IE8 rotation 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

Hi there, well here comes IE8 ruinning my life (AGAIN). I was working on some rotation effects (I was thrilled with the results by the way), till I have discovered that IE8 does a horrible effect rotating the images. If you don't use position:absolute, the rotation affects the image within the div (If my div is a rectangle of 700 px by 300px) so the size of the rectangle acts like a mask.


Plus: IE8 makes a horrible black border on the images that rotates, so ugly that is really hard to look at it, I saw this black horrible border using the alpha effect before, but I said, what the heck!, it's not critical, but this rotation issue really forces me to avoid the effect. All browsers are plain perfect as usual, but if it doesn't work on IE8 properly it's a problem. Sad but true, another jewl ruined by this so called browser.


I've tried all combination of positions, but it does seems that the only position that rotates the div as it is expected to be on IE8 is absolute. Hope anyone could give me a hand on this one.


Here's a simple example.




http://www.kassandrafoto.com/ (So sorry if it's not allowed to post links, you can delete it any moment)



PS. ...really depressed till good news. Thanks for your GREAT, GREAT work guys.



Link to comment
Share on other sites

Yup, rotation is 1 of the many limitations and problems with IE8. 

We can't do anything with CSSPlugin to get around the clipping/masking effect you have encountered. Setting position:absolute is a must for it to appear properly.


Have you tried putting a div or element with position:absolute inside a div with position:relative?


Its not the best, but to allow the majority of users to see things as you desire without being crippled by IE8's limitations you could sniff for IE8 and only add the rotation if the browser isn't IE8


And yes, older IEs are horrible with transparent pngs. 


I wish we had better news for you but I don't know of any other tools that solve these IE problems.


BTW, your animation looks REALLY nice in a real browser! ;)

Also, there is nothing wrong with posting links to your work. We encourage it.

  • Like 1
Link to comment
Share on other sites

Oh my, how sad is this. Yeah, the blame is totally not on you guys, you are my Heroes since my flash times, I know perfectly who's to blame.


Wrapped the image with a div does the trick, thank man, you have to change some things around but the rotate effect and its possibilities worth the rethinking on two DOM objects instead of one, but it's just the same, actually this was the light that I was looking for, not
the one that I wanted, but definitely a great one. Thanks buddie.

See the results.




Now if I think on a rotate element I know that I have to use a wrapper div and that's all.

Thanks a lot man a keep the great work.



Link to comment
Share on other sites

  • 4 months later...

hi there,


quick searching on Google brings me here.and Im currently working on image rotating,does GreenSock provide any source codes written in .Net? If yes ,Plz give me some detail guide,thx in adv.as a beginner in image programming ,I came across so-called "open source"likeimage rotating  on the web.But it is not turely free.


Free image rotation lib is in need .Any help is appreciated.


Link to comment
Share on other sites

Out tools are written in JavaScript, ActionScript 3 and ActionScript 2. 

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.