Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Paver

Jerky translate animations in Chrome

Recommended Posts

Is anyone else experiencing jerky animations with GSAP on latest Chrome (v89)? It's very noticeable on text - looks like it's moving one pixel a time for me (some kind of subpixel rendering issue perhaps?).

 

I have a comparison to a CSS animation in the CodePen which is looking smooth in Chrome.

 

I don't experience the issue in Safari (can't tell the difference between GSAP/CSS in the CodePen).

See the Pen ZELxYXj by pavlo-livearea (@pavlo-livearea) on CodePen

  • Like 1
Link to post
Share on other sites

Yep, I can see that too.

Strangely - the CSS animation is still smooth even if I change the transform to translate3d(0px, -10px, 0px) which is exactly  the same CSS transform GSAP is injecting inline...
 

  • Like 1
Link to post
Share on other sites

I am, I added the will-change attribute in the css and solved the problem.

 

Edit: But still, I did both, and the css looks better

  • Thanks 2
Link to post
Share on other sites

Yeah, same here - @GreenSock


Heads-up, something whacky's going on with chrome.

Link to post
Share on other sites

Sometimes adding a slight rotation can help with the pixel snapping... and of course adding will-change.

 

gsap.set(".gsap", {
  rotation: 0.01
})

 

  • Like 5
  • Thanks 1
Link to post
Share on other sites

Interesting that the pixel snapping isn't happening with the CSS version though.

I would have expected them to act the same if the elements that are animating have the same properties and and the transform values are the same.

Link to post
Share on other sites

Yeah, I'm guessing it's because Chrome can detect when a CSS animation is happening, so it can optimize for that. When setting the style inline, it doesn't know anything about what's going to happen next, so it's going to optimize for text legibility, resulting in the pixel snapping.

 

But that's just a guess. 🤷‍♂️

  • Like 1
Link to post
Share on other sites

Glad it's not just me :)

 

Haven't noticed this before but thanks for the workarounds. A little hacky but think I prefer adding the slight rotation as it can just be included in the same GSAP call. I do wonder how it fixes it though 🤔

 

@OSUblake pixel snapping... that's the term I was looking for!

Link to post
Share on other sites

Yeah, interesting.

 

The CSS version is just automagically being forced onto a new composite layer
 

image.png

 

 

 

  • Like 1
Link to post
Share on other sites
1 hour ago, eduardfossas said:

I am, I added the will-change attribute in the css and solved the problem.

 

Edit: But still, I did both, and the css looks better

Hm, are you sure? When I added will-change: transform, it looked identical to me. Maybe I'm missing something. Can you please take a screen recording or something that shows the CSS version looking better even when will-change: transform is applied to the GSAP one? 

 

And yeah, it's pretty annoying how browsers just change things out from under users in terms of rendering. Using translate3d() is supposed to trigger the composite layering (and it always used to), but now that's apparently not the case in Chrome. They've done this kind of thing before - see this article:

 

 

I think Blake is right about Chrome trying to be "helpful" 🙄  by snapping to whole pixels when rendering. The key is to force the pixels not to align cleanly with the rows/columns of pixels which can be accomplished by setting a rotation (even a tiny one) or a skewX or skewY. 

  • Like 3
Link to post
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.

×