Jump to content
Search Community

IE8 and Rotation Transform Issue

Scotty test
Moderator Tag

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, 


I'm experiencing a bizarre issue with IE8 and the rotation transform code that GSAP is producing. I'm trying to narrow it down to either my bad code, IE8 or a possible bug in GSAP. It may be my code but that's why I'm asking here. :)


The problem is with the first rotation transform on an image. It's not keeping the image centered using the margin offset in the rendered code. Calling the rotation command a second time, however, inserts the correct margin centering code.


Take this line of code:

TweenMax.to( '#stairs-container-bottom', 0, { rotation: -30 } );

I'm seeing it render out this initially for IE8:

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.86602, M12=0.49999, M21=-0.49999, M22=0.86602, sizingMethod='auto expand')  ; MARGIN: 0px; ZOOM: 1; DISPLAY: block

The problem I'm seeing is the margin is set to 0, causing the graphic to be offset from the center rotation point visually.


If I call the rotation command again, it renders out with the correct margin to keep the image centered:

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.86602, M12=0.49999, M21=-0.49999, M22=0.86602, sizingMethod='auto expand') ; MARGIN: -31px 31px 31px -31px; ZOOM: 1; DISPLAY: block;

Has this been reported before? Is it something I'm doing?


I'm testing this in a VMWare image of Windows 7 with an IE8 install version 8.0.7601.1.17514


Thanks for any direction :)

Link to comment
Share on other sites

Hello Scotty, and Welcome to the GreenSock Forums!


Without seeing what your CSS looks like.. this could be a number of things that IE8 could be causing:

  • Is the element your rotating have the CSS property position:absolute or position:relative, so it takes the element out of the flow of the document?
  • For IE8 do you have the CSS property zoom:1 set in your stylesheet, to tell IE that the element hasLayout? (even though i do see GSAP add it to the style)
  • To get an exact render its best to test on real IE8 standalone, because I have seen even VMware with IE8, not render like real IE8 standalone on XP and Win7 on PC.
  • You could try using GSAP to set() the margin for the image so it can keep track of what or any changes happen.

If possible can you provide a codepen example so we can see your code in action.


Here is a video tut by GreenSock on How to create a codpen demo example.



If using IE8 to view in codepen, that you will need to view the example in codepen's Full View, because IE8 will not work in codepen Edit modes.


But once we see your code in context it will help us to see the behavior you describe


Thanks :)

Link to comment
Share on other sites



Thanks for the reply. Got all the bullets you have and been there, done that, etc. And it's the same on a laptop I have with IE8 on it. VMWare has been pretty solid for this stuff in my experience.


This project is too big to put on codepen, plus it's not "live" yet so due to client-confidentiality, etc. etc. I don't want to post a public link to it, but I could send you a PM if you want to take a look at it.


I'm still going through and trying to narrow down what may be causing a conflict. I've gotten it to work in some scenarios so far.

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.
  • Create New...