Jump to content

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

Text jitters in Chrome

Recommended Posts

Anyone have a good idea about how I could prevent the text jittering that appears in Chrome? All the other browsers I've tried seem smooth enough. I've been beating my head against a wall for long enough that I'm hoping someone here has solved this issue before. Thanks in advance for any guidance!!


Update: Two great solutions were provided below. I've updated my pen so you can see the issue and the fix, side by side.

See the Pen vMNOVB?editors=0010 by creativeocean (@creativeocean) on CodePen

Edited by creativeocean
noted the change to original codepen
Link to comment
Share on other sites

Hi @creativeocean, that's something that has bugged me in the past too. In thinking about it ... scale is similar to moving something away-from/toward you ... so why not tween the z property!? I believe scale operates quite a bit differently than 3d transforms ... and 3d transforms tend to be "better". Certainly looks better to me in Chrome!


See the Pen qwOdeG by sgorneau (@sgorneau) on CodePen



  • Like 1
Link to comment
Share on other sites

Yeah, Chrome has made multiple changes to the way it renders things, especially with transforms and it's SUPER annoying. It started here: https://greensock.com/will-change


You can try setting force3D:false and use a slight rotation to get better rendering: 


And of course @Shaun Gorneau's solution is also excellent. 


Good luck, Tom!

  • Like 3
Link to comment
Share on other sites

I wish I could hug you guys! I wound up adding a separate tween on the actual text div that has the force3D set to false (and nominal rotation). The length of the tween needed to be a bit longer than the scaling one to make everything smooth...but problem solved! Thanks again :)


(updated code is in the pen at the top of this thread)

  • Like 1
Link to comment
Share on other sites

@creativeocean I'm curious why you put the force3D on the inner text element in example 2 vs on the wrapping element. Are you seeing better performance with that? In this pen, I see examples 2 and 3 behaving virtually the same in Chrome, where 2 has force3D on #search2 and 3 had force3D on #searchTxt3


Just curious :)


See the Pen xeVONN?editors=0110 by sgorneau (@sgorneau) on CodePen

Link to comment
Share on other sites

@Shaun Gorneau In Chrome I'm seeing a slight jitter in all three of your example tweens. In my solution, having a longer duration tween on the interior div ensured that there wasn't any jittering at the tail end of the parent element's tween. That's when the ease causes the smallest differences, and I'm guessing that's why the text still jittered a bit when force3D was set to false. It definite improved things, but didn't fix the jitter entirely. 


PS: Codepen embeds aren't showing up for me right now, so here's the link: 

See the Pen vMNOVB by creativeocean (@creativeocean) on CodePen



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.