I noticed that some of the paint worklets that use random patterns repaint every frame on hover. That means one of the elements they are contained in is animating a non-composited property.
After looking at the styles it’s the animation of box-shadow, that causes a repaint on every frame. This PR removed the change in box-shadow and also adds will-change: transform to the cards to avoid a repaint on the first and last frame of the animation.
This obviously degrades the visual effect, but animating box-shadow is quite costly and can end up janking on low-end devices. If you want the shadow to animate on hover, it would be better to put the box-shadow on an :after, and use animate scale() instead of box-shadow directly.
una
commented
4 years ago
I noticed that some of the paint worklets that use random patterns repaint every frame on hover. That means one of the elements they are contained in is animating a non-composited property.
After looking at the styles it’s the animation of
box-shadow, that causes a repaint on every frame. This PR removed the change inbox-shadowand also addswill-change: transformto the cards to avoid a repaint on the first and last frame of the animation.This obviously degrades the visual effect, but animating
box-shadowis quite costly and can end up janking on low-end devices. If you want the shadow to animate on hover, it would be better to put thebox-shadowon an:after, and use animatescale()instead ofbox-shadowdirectly.