Jump to content
Search Community

Jerky translate animations in Chrome

Paver test
Moderator Tag

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 comment
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 comment
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 comment
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 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...