Artifacts/tears in nested transforms on Chrome/Edge

[gmullinix]

First of all, I'm pretty sure this is a browser issue and not any kind of bug in GSAP, but I'm posting here in hopes someone knows how to fix it.

 

In the attached Codepen, the #main_wrapper is set up to transform: scale to fit the window. As the blue #menu animates left and right, it will leave behind some streaks of blue. The streaks only appear in Chrome and new Edge. The streaks will not appear if I remove the transforms on #main_wrapper. They also won't appear if I put a will-change: transform on #menu.

 

Anyone have ideas on how to fix this, or should I open an issue at bugs.chromium.org? Hesitant to use will-change unless there's no other solution.

See the Pen NWrJBro by gem0303 (@gem0303) on CodePen

[ZachSaucier]

26 minutes ago, gmullinix said:

They also won't appear if I put a will-change: transform on #menu. ... Hesitant to use will-change unless there's no other solution.

Why's that? Using will-change is exactly what I was going to recommend   

 

Other notes:

• If you're going to load and use GSAP, why not animate with GSAP instead of using CSS transitions? Not only do you have more control, but that might fix your issue because GSAP forces 3D rendering in some circumstances which may fix the issue (I haven't tested).
• It's not recommended to animate properties like margin. Try to stick to more performant properties like x, y.

[gmullinix]

On 11/16/2020 at 5:14 PM, ZachSaucier said:

Why's that? Using will-change is exactly what I was going to recommend   

Habit, I guess. 😄

 

Quote

If you're going to load and use GSAP, why not animate with GSAP instead of using CSS transitions?

The menu is animated with GSAP. There was a CSS transition leftover in my CSS code for a different element that wasn't doing anything. I removed it for clarity.

 

And good news, I was able to fix the issue with a force3D: false on the tween. Thanks for that tip!