RolandSoos

Chrome -> flickering on scale

Recommended Posts

I have 3 boxes animated with scale on this Codepen.

#1 has a parent with overflow hidden -> the scale flicking during the scale animation

#2 has a parent with overflow hidden and the parent has a parent with perspective -> the scale animation is fine

#3 has a parent with overflow hidden and perspective -> the scale animation is fine

 

Is adding perspective to the overflow:hidden element is the right solution or is there a better way to fix this?

 

Tested with Chrome 71. Firefox seems fine.

Share this post


Link to post
Share on other sites

Hm, I can't seem to notice any "flicking". Are you saying it's vibrating during the scale or something? Chrome has monkeyed with how they render transforms and it's pretty annoying - see https://greensock.com/will-change. 

 

If setting a perspective "fixes" it on your end, that sounds like a GPU thing (Chrome is layerizing it). You can try force3D:true, or you could experiment with will-change: transform in your CSS but be very careful about that (see the article I linked to above). Or just use perspective :)

Share this post


Link to post
Share on other sites

Thanks Jack, I will try the fix tomorrow. It seems fine on Macbook Air's Chrome. 

 

I saw the problem on Win 10 with AMD graphics. The first box and text has a vibration during the animation.

Share this post


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.