Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sashaikevich

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

Recommended Posts

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

Link to post
Share on other sites

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!

Link to post
Share on other sites

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)

 

Link to post
Share on other sites

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? 
 

Link to post
Share on other sites

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.

Link to post
Share on other sites

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)

Link to post
Share on other sites

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

  • Thanks 1
Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×