Jump to content
Search Community

Need help with unexpected "jumpy" text issue

SimonWidjaja test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

I am experiencing a strange "jumpy" text issue on a very basic pulsating button (div with text).

I have attached screen recording to demonstrate the issue. My project is a larger React app, so creating codepen is more complicated...

Does anyone have an idea what is happening?

It looks fine in Firefox. But it's jumpy in Chrome (current version) and Edge.

 

This is my (super basic) gsap loop:

gsap.to(cta.current, { scale: 1.02, ease: 'power4.inOut', yoyo: true, repeat: -1 })

 

I have tried to force3D, but didn't have any effect.

It feels like the text is trying to fit the pixel grid and snaps to the closest pixel...

 

Link to comment
Share on other sites

  • Solution

Yep, it sounds like you're correct about the browser applying pixel-snapping (thanks browser! 🙄 )

 

It's very tough to troubleshoot blind, but here are some things you can try:

  • Apply a tiny rotation or skew so that it forces the browser to stop assuming the pixels align to the grid. Even rotation: 0.01 can help. 
  • Try force3D: false or true. 
  • Set will-change: transform

Let us know if any of those help. If not, please provide a minimal demo

Link to comment
Share on other sites

8 hours ago, GreenSock said:

Yep, it sounds like you're correct about the browser applying pixel-snapping (thanks browser! 🙄 )

 

It's very tough to troubleshoot blind, but here are some things you can try:

  • Apply a tiny rotation or skew so that it forces the browser to stop assuming the pixels align to the grid. Even rotation: 0.01 can help. 
  • Try force3D: false or true. 
  • Set will-change: transform

Let us know if any of those help. If not, please provide a minimal demo

 

Setting will-change: transform  did the trick. Strange. I thought force3D would force a pseudo 3D transformation and rendering on its own rendering layer to enable sub-pixel rendering and prevent pixel-snapping. But force3D didn't fix my problem.

Can you please clarify when to use which technique?

Thanks for the quick response (as always ;)

Link to comment
Share on other sites

3 hours ago, SimonWidjaja said:

Can you please clarify when to use which technique?

Maybe Jack has a more in depth understanding but from my experience it's very inconsistent. 

Sometimes one of them will help, sometimes none of them do - sometimes they help in one browser and not in another. Sometimes they help in one browser and then that browser updates and they don't help anymore.

None of them should be necessary really - they're hacks and workarounds.

Link to comment
Share on other sites

9 hours ago, SimonWidjaja said:

Setting will-change: transform  did the trick. Strange. I thought force3D would force a pseudo 3D transformation and rendering on its own rendering layer to enable sub-pixel rendering and prevent pixel-snapping. But force3D didn't fix my problem.

Can you please clarify when to use which technique?

Yep, the force3D stuff used to always trigger that successfully. For YEARS that was the go-to technique for getting GPU acceleration and rasterization for maximum speed. That still does seem to work in some browsers, but others (like Chrome) have totally changed rendering techniques over the past few years. It has caused a lot of problems and in my opinion, it was a real step backwards. See

 

So now Chrome doesn't seem to automatically trigger layerizing when it sees a 3D transform. 

 

My general impression is that will-change is working okay in many situations now. Early on, it was plagued with problems. And you still need to be careful because it rasterizes the elements at the native size, thus you can get funky blurring/pixelizing if you animate the scale up, for example. Totally unrelated to GSAP - it's a browser thing. 

 

@Cassie is right about some solutions working in one browser and not another. Since browsers just change rendering techniques at random, it's good to test things out. Super annoying, I know. 

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