Chrome -> flickering on scale

[RolandSoos]

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

[GreenSock]

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

[RolandSoos]

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.