Jump to content
Search Community

Top property added to transform tween for Firefox

pederan 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



Are you aware of that css top property is added to tranform tweens in Firefox?


For a translateX tween (which is converted to matrix()) the top value from css is added to the inline style attribute. It seems this only happens in Firefox (not safari, chrome and opera)

Check out this codepen:

See the Pen IsLpe by pederan (@pederan) on CodePen

Here top: 20px is added as inline style 


And even stranger if you add translateZ(0.1px), 0.05px is added to the the applied css top value


Check out this codepen:

See the Pen mfour by pederan (@pederan) on CodePen

Here top: 40.05px is added as inline style at tween end.

Also it looks like the matrix values are tweened/updated after the tween is complete.


This is highly undesired behaviour and I guess it also affects the performance in FF. Anyone know why this is happening?




Link to comment
Share on other sites

Yes, that's very intentional. Let me explain: 


Firefox has a bug (the browser itself) that causes elements to randomly DISAPPEAR when you animate 3D transforms (and sometimes even 2D transforms)! The only way to solve it is to force a repaint on each frame. There are only 2 ways I know of to do that:

  1. change a property of the element like "display" and then get its offsetWidth or offsetHeight so that the browser has to recalculate things, and then switch the property back to what it was originally. This is extremely slow for the browser.

  2. Alter the "top" property by at least 0.05px on each frame/render. This is MUCH faster than the offsetWidth trick and generally it's imperceptible to the user, so we opted for this solution. We shift "top" back and forth by 0.05px on each frame. 

You can see the bug for yourself if you want by deleting the code we've got in TweenMax (actually, CSSPlugin) that does the 0.05px bump. Trust me - it looks TERRIBLE. Things flicker like crazy. And yes, this only gets implemented in Firefox because it's the only browser that suffers from the bug. 


We noticed some rare situations where things completely disappeared in Firefox even when only doing 2D transforms, and again the only solution was to force the repaint with the 0.05px bump. 


We've spent countless hours looking at this stuff and figuring out how to ensure that animations "just work" in the major browsers so that you don't have to run into these unpleasant surprises (like things randomly disappearing).


If you (or anyone else) know a better workaround, we're all ears. 


Does that clear things up? 

Link to comment
Share on other sites

Yes, that certainly clears things up and explains why the value is added, thanks.


I noticed this in my latest project where I had position an element by the bottom property, and the position was all wrong in FF. The inline top property that is added overrided the bottom property in my css class. I then changed the bottom property to a top property in my css and positioned it as earlier. But that didn't solve it either since the inline top value was set to 0px and the value in my class was something else. I solved this by adding the !important declaration to it. But I guess this can cause the bug you mentioned to kick in since the top value in the inline style is ignored? 

Link to comment
Share on other sites

The Firefox bug only seems to happen DURING animation, so if you alter the "top" property after animation is done, I suspect you'll be okay.


Also, as of 1.8.2, there's a new "clearProps" property which is a comma-delimited list of property names that you want to be cleared from the inline style at the end of the tween. For example:



//at the end of the tween, clear only the left and top properties, leaving the color
TweenLite.to(element, 2, {left:100, top:200, color:"red", clearProps:"left,top"});
//or use "all" to clear ALL styles (even ones not tweened)
TweenLite.to(element, 2, {left:100, top:200, color:"red", clearProps:"all"});

Typically you don't need to define any vendor prefixes either - it'll handle that automatically. So, for example, to clear the transforms you can just put "transform" in the list or any of the transform-related properties like x, y, scaleX, rotation, etc. and it'll figure out if it should clear WebkitTransform or MozTransform or whatever. Same for "boxShadow" being "WebkitBoxShadow", etc.

Link to comment
Share on other sites



Ok, sounds great. But why doesn't the inline top value set by TweenMax differ from the top value set in my css class? 


You can see from the screenshot that top is set to -0.05px by gsap while top is set to 140px in my css class. This messes up the layout unless I declare my top value as important. Shouldn't gsap set the inline top property to the same value as defined in my css class +- 0.05px?



Link to comment
Share on other sites

Yes, it should honor the value set in your css. It does that for me. I double-checked the code and it is indeed using getComputedStyle() to find the current value and add 0.05 to it. An OLD version of CSSPlugin used the inline style - are you using the latest version? 


If you're still having trouble, please post a very simple example file that demonstrates the issue so that we can take a peek. 

Link to comment
Share on other sites

I was using v 1.661, and by swapping to v 1.8.2 fixed this issue with different top value. I also noticed that if I use bottom value it calculates the correct top value in the latest version :)


Thanks a lot for all help, keep up the good work.

  • Like 1
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...