TweenLite Rotation misbehaving in IE9

[awp.black.69]

I am trying to rotate an element(button) counter-clockwise 90deg using TweenLite. It is working fine in chrome and firefox but misbehaving in IE9. Expected behavior is that it only rotate but in IE9 along with rotation it is changing is position also. This behavior is consistent in IE9 and is produced only in special case, with simple rotation test in IE9 the behavior is as expected.

 

Here is a video for reference (notice the button labeled button 17):
http://screencast.com/t/waaEX1NxWcTd

 

 

The HTML of button looks something like:

<div data-id="animWrapper_spin9ivgo7os" style="height: 11.2%; width: 8.65979381443299%; position: absolute; top: 17.6%; left: 67.5257731958763%; z-index: 8; -webkit-perspective: 400; -webkit-backface-visibility: visible; -webkit-transform-style: preserve-3d; display: block;">
<button checked="checked" tagname="BUTTON" src="" srcsize="0" srcduration="" srcformat="" domstyle="[object Object]" name="button 17" class="button adelem" data-id="9ivg" adtype="button" style="width: 100%; height: 100%; left: 0px; top: 0px; z-index: 8; -webkit-perspective: 400; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d;">button 17</button>
</div>

The rotation is applied to the div wrapping the button [data-id=animWrapper_spin9ivgo7os], which is inside another iframe.

 

 

I am unable to reproduce the error in simple page. Please help me if someone know what could have been the reason.

[Diaco]

Hi awp.black.69 

 

TweenMax/Lite 2D rotation works correctly in IE9 , pls make a reduced Codepen demo available to better response .

[Jonathan]

Hello awp.black.69,

 

Just to add to Diaco.AW response ...

 

Is this real IE9 standalone .. or is this IE10 or IE11 emulating the rendering of IE9?

Also what is the OS you see this on?

 

Thanks!

[awp.black.69]

Hi Jonathan,

 

I am using Window 7 Professional with stand alone IE9 (not emulated), version 9.0.8112.16421.

 

 

Diaco.AW : That's the problem, when I try to create a reduces demo it works fine. As I told this is very specific to my page (an Ad to be more precise).

 

Here is a test link:

http://teststudio.bonzai.ad/mizu/ie9issue.html

 

I have managed to create a very simple ad, though you wont be able to see the source as it is minimized.

[Jonathan]

Hello awp.black.69,

 

When i look at your code example above you are only displaying HTML markup but no JS GSAP code.

 

In that HTML markup above you have webkit specific vendor prefixed CSS properties. That would not work in IE.

 

These properties with webkit only work in Chrome and Safari, or/and Chromium Based Browser.

:

style=" -webkit-perspective: 400; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d;"

:

You would have to remove them and use the GSAP set() method to apply your transform styles. This way you allow GSAP to handle the cross browser prefixes (if needed) for each browser.

 

Also some of those CSS properties wont work in IE. Check this out .. backface-visibility or perspective is not supported in IE9 caniuse.com:

 

http://caniuse.com/#search=backface

http://caniuse.com/#search=transform

 

I have some questions:

• Are you positioning your elements with CSS position absolute or relative.
• Are you using the latest version of GSAP?
• Are you animating left / top CSS properties or are you animating x (translateX) and y (translateY) in GSAP

This will be hard to debug with your source code minimized. I would suggest to just take your GSAP code and make a simple limited example in codepen. Just a simple example of your GSAP code. This way we can help you better by editing your code in a live editable environment.

 

Here is an example by GreenSock on How to create a codepen demo example.

 

Thank You!

[awp.black.69]

Hi Jonathan,

 

Finally I found the problem. "filter" used for applying gradient in IE was the culprit. Here I have created a simple codepen example:

 

See the Pen QwLYaB by anon (@anon) on CodePen

 

If you remove filter style from button it works fine in IE (edit IE9).

 

Please, have a look and let me know if there is a fix.

[Jonathan]

Hello awp.black,

 

Since the filter is causing an issue in IE9 when rotating.. then you can just apply the filter gradient (IE6-9) on a nested <span> tag like this:

 

Try this in IE9:

See the Pen YPKbyy by jonathan (@jonathan) on CodePen

:

#rotate{
  position: absolute;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 5px;
}

#rotate > span {  
  display:block;
  /* IE6-9 filter gradient */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0284d2', endColorstr='#2660db',GradientType=0 ); 
}

:

display: block ..  makes the <span> tag display property block, so it fills its parents space. By default <span> tags have their display property set to inline.

 

and your #rotate button HTML markup would look like this:

:

<button id="rotate">
     <span>Click Rotate(Bottom Right)</span>
</button>

:

This way your gradient filter is applied to a child of your #rotate button. And the transform rotate is just applied to the #rotate button (the parent) not causing the conflict.

 

Does this help?

[awp.black.69]

Hi Jonathan,

 

That fixed the problem. Thanks for that and sorry for the delayed reply.