VikAPAD Posted March 30, 2023 Share Posted March 30, 2023 I have a pretty simple text animation where I have the left part of a word animating in from the left and the right part of the word animating in from the right. The animation works perfectly on desktop, but on mobile(iOS is what I'm testing on) I am getting some weird artifcating on the top right corner of the "Y"s. This seems to be an issue with the custom font I am using, because if I change to Arial or Verdana the issue is not present. I found a few different possible solutions on this SO question, but no suitable solution yet. One thing that does seem to work is adding will-change:transform; to the text container. Though this is not a perfect solution as it ends up cutting off the top right corner of the "Y" where the artifacting is happening. Any ideas? See the Pen LYJozNX by OBP-Jared (@OBP-Jared) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted March 30, 2023 Solution Share Posted March 30, 2023 Yep, that's totally a browser rendering thing. Unrelated to GSAP. You could set will-change: transform and then add a 1 or 2px padding-right to keep the "Y" from getting clipped. Yeah, Safari is annoying/weird sometimes. gsap.set(".text", {willChange: "transform", paddingRight: 2}) In general, it's definitely better to animate x/y transforms rather than left/top. Better performance because it doesn't affect layout and they can do sub-pixel rendering. Just sayin' 3 Link to comment Share on other sites More sharing options...
VikAPAD Posted March 30, 2023 Author Share Posted March 30, 2023 1 hour ago, GreenSock said: Yep, that's totally a browser rendering thing. Unrelated to GSAP. You could set will-change: transform and then add a 1 or 2px padding-right to keep the "Y" from getting clipped. Yeah, Safari is annoying/weird sometimes. gsap.set(".text", {willChange: "transform", paddingRight: 2}) In general, it's definitely better to animate x/y transforms rather than left/top. Better performance because it doesn't affect layout and they can do sub-pixel rendering. Just sayin' Very odd behavior, but your solution worked perfectly! Thank you so much! 2 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