Jump to content

Tom B. @ Wix

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

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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


Link to comment
Share on other sites

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




Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

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.