Leading edge of animation disappearing in Chrome

[DugF]

I'm completely new to Greensock and just feeling my way in.  I'm trying to decide what animation method to use for a project I'm starting to animate a circle of fifths image so I'm playing with a number of options, of which Greensock is one.  I've made a very simple animation to start exploring Greensock, which just moves a 'Hello World' h1 with a border.  It is running fine in Edge and Firefox, but when I run it in Chrome the leading edge of the element (i.e. the right border) is disappearing during the animation.  I've tried it in a new incognito window with all extensions disabled and I still get the issue.  I've also tried it on a laptop and desktop and still the same issue.  I've tried searching for existing threads on this but couldn't find anything similar.

Are there any things I can try to get a better animation quality in Chrome?

Thanks.

See the Pen gOZRBRO by DugF (@DugF) on CodePen

[mvaneijgen]

Hi @DugF welcome to the forum!

 

Seems like a weird issue. I've just tested on Chrome Version 117.0.5938.62 and it seems perfectly fine here (also tested Safari and also no issue), do you have a version number and OS you're running this on and if you could create a screen recording that would be awesome! 

[DugF]

Thanks for the amazingly quick response.  I'm running Chrome 116.0.5845.182 (64-bit) on Windows 10.  I will do a screen recording, but I won't be able to do that until later in the day.  I'll post once done.

 

Thanks again.

[DugF]

Here is a link to the screen recording. 

 

The first one is Chrome in incognito mode, then Firefox, then Edge.

[GreenSock]

I can't reproduce that either, but it's definitely unrelated to GSAP. Have you tried adding will-change: transform in your CSS? Or you can also try adding force3D: false to your tween. I'm curious if either of those solve it for you. 

[DugF]

Thanks, Jack.

I tried both of those settings (on both the h1 and body) and it didn't make a difference.  Curious that I've got it happening on 2 different machines.  I managed to cobble together a third machine last night and it is OK on that.
Thanks for your efforts.

[GreenSock]

Yeah, that's pretty odd. Again, it's not GSAP-related. You could try wrapping that <div> in a container <div> and animate that container instead. At this point it's a matter of trying to force Chrome to render it correctly. ?‍♂️