Share Posted April 2, 2019 (edited) 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 Link to comment Share on other sites More sharing options...
Share Posted April 3, 2019 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 1 Link to comment Share on other sites More sharing options...
Author Share Posted April 3, 2019 Thanks Shaun! Looks quite promising Link to comment Share on other sites More sharing options...
Share Posted April 3, 2019 Let us know how it works for you! Link to comment Share on other sites More sharing options...
Share Posted April 3, 2019 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! 3 Link to comment Share on other sites More sharing options...
Author Share Posted April 3, 2019 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) 1 Link to comment Share on other sites More sharing options...
Share Posted April 4, 2019 @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 More sharing options...
Author Share Posted April 4, 2019 @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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now