GSAP text animation with custom font causes weird pixel artifacts

[VikAPAD]

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

[GreenSock]

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'

[VikAPAD]

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!