Jump to content

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.

See the Pen BvPPyj by anon (@anon) on CodePen

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.