Text jitters in Chrome

[creativeocean]

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 April 3, 2019 by creativeocean
noted the change to original codepen

[Shaun Gorneau]

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

 

 

[creativeocean]

Thanks Shaun! Looks quite promising

[Shaun Gorneau]

Let us know how it works for you!

[GreenSock]

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: 

See the Pen 9f08c03aefba2e239a52f80172c85c51?editors=0010 by GreenSock (@GreenSock) on CodePen

 

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

 

Good luck, Tom!

[creativeocean]

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)

[Shaun Gorneau]

@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

[creativeocean]

@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