Bug Report: with rotate(180deg) TweenMax sometimes does the wrong matrix conversion

[Tom B. @ Wix 5 Likes (Newbie)]

I've come across a bug when applying a transformation on an already rotated element with 3d rendering enabled:

 

You can see the codepen for the live preview

 

I have an element with 180deg rotation and Z transform:

<div id="aa" style="transform:rotate(180deg) translateZ(10px)">I'm rotated 180 Deg</div>
// On Webkit/Gecko this happens only with z > 0, On IE it happens also with z == 0

And then I run some transform animation on it

TweenMax.from('#aa', 2, {x:'+=100'})

The result is that the rotated div flips back to 0 degrees, or, from matrix(-1,0,0,-1,0,0) it transforms to matrix(1,0,0,1,0,0)

This does not happen on other rotation angles.

See the Pen dPomav by tombigel (@tombigel) on CodePen

[GreenSock 18,577 Likes (Superhero)]

Sorry about that, Tom - yes, that does appear to be an issue in the way CSSPlugin interprets 3D matrices in very specific scenarios. I believe it is fixed in the attached preview of 1.14.3 - would you mind letting me know if it works well for you? 

 

EDIT: file was updated on 11/27

GSAP_1.14.3_preview6.zip

[Wix Wow!Team 4 Likes (Newbie)]

I have tested 1.14.5_preview5 version for the above scenario.

 

the issue exists..  

On Webkit/Gecko when translateZ value = 0 (reproducible on previous version when Z > 0)

On IE 11 it seems ok.

 

See the Pen XJbyxr by yanivz (@yanivz) on CodePen

 

 

Yaniv

[GreenSock 18,577 Likes (Superhero)]

Great catch - sorry about that. I updated the file above with a fix. It should work well now - I tested both 3D and 2D versions in your demo. 

[Wix Wow!Team 4 Likes (Newbie)]

another case that make a wired mirror flip (happens on production version)

IE 11 , an element with transform rotate of 91 degrees and applying animation to 90 degrees rotation.

 

See the Pen qEObbR by yanivz (@yanivz) on CodePen

[GreenSock 18,577 Likes (Superhero)]

Just to be clear, you're saying that was broken in the old version, but not the 1.14.3 preview I posted last, right? So it's fixed now? I cannot seem to break it in the way you're describing. 

[Wix Wow!Team 4 Likes (Newbie)]

yes , in the latest preview it seems to be solved.