Chrome flickering issue that "will-change:opacity" doesn't solve

[sashaikevich 4 Likes (Newbie)]

As my animation runs, and the layers transition through their x, y, z rotations and font size (which does something fun with the perspective) I"m getting this weird flicker in Chrome that I've noticed in the last 24 hours. 

I've learned here, that flickering might be a chrome bug, but the "will-change" fix didn't do it for me there. Is there anything else you guys can think of for me to try?

 

I set up a demo of just the problematic component, but the flickering isn't there 100% of the time: 

See the Pen poymMvK?editors=0010 by sashaikevich (@sashaikevich) on CodePen

 

 

See the Pen poymMvK by sashaikevich (@sashaikevich) on CodePen

[ZachSaucier 6,610 Likes (Superhero)]

Hey sashaikevich. I'm not seeing any flickering on my device. You can try will-change: transform, opacity;. Maybe try force3d: true in your .set("#tilt-wrapper .tidy-team-layered-wrapper". Maybe try using less layers.  Maybe try not animating the opacity at all. Maybe try dropping the effect completely  

 

It's definitely not a GSAP issue. Best of luck debugging it!

[sashaikevich 4 Likes (Newbie)]

Thanks for the quick reply and the ideas.

 

The will-change didn't help. Nor did force3d. 

Oddly adding a width did, which is what I might have had when you loaded the animation. 

 

This simple line fixed it in my demo

.tidy-team-layered-wrapper {
  width: 70vmin;

But in my project the flickering remained, so width is not enough. Though why that of all things fixed the flicker I do not know. Gha!

(I removed it from the demo, so the issue should be visible again)

 

[sashaikevich 4 Likes (Newbie)]

Ok, so if this can be called narrowing it down...I only see the issue on my 4k monitor. When I switch over to my 1920 no issue! 

I swear debugging is like 95% of my time... 

 

Any ideas what could be causing this behaviour? 
 

[ZachSaucier 6,610 Likes (Superhero)]

There are a lot more pixels to render on a 4k screen so it's quite understandable that it would have more trouble. You could limit the size so it doesn't take up as many pixels.

[sashaikevich 4 Likes (Newbie)]

It's so smooth in Safari. Meanwhile Chrome is strobing like it's a techno rave. 

 

Do you think moving the animation to canvas would help? (I know nothing about canvas, and before I go down that rabbit hole, I'd like to find out if its even worth it)

[ZachSaucier 6,610 Likes (Superhero)]

Ya, canvas might help. Doing 3D rotation in Canvas is far from easy though.