Finally figured out why my CSS animations were lagging on mobile

I visited a local dev meetup in Portland last month and a guy there watched me scroll through my project. He pointed out I was using too many box-shadow transitions on hover states. Turns out rendering all those shadows on mobile chipsets is a real performance killer. Has anyone else run into this issue with complex hover effects?

2 comments

2 Comments

uma8961d ago

Three years ago I rebuilt my whole portfolio site and had 12 different hover animations running at once. My buddy tested it on his Galaxy S9 and the thing dropped to like 15 frames per second just from me going crazy with transform scales and opacity fades. Switching those to GPU-accelerated properties and limiting animations to 3 per page fixed everything without losing the cool factor.

nina83422h ago

Yeah but what exactly were you using for those box shadows? Like were you doing multiple layered shadows on the same element or just one per hover state? I found out the hard way that even two shadows on a single button can tank performance on older iPhones. There's this weird thing where the browser tries to redraw the entire shadow chain every frame and it just eats up all the GPU resources. I switched to using pseudo-elements for some of my shadow effects and that helped a lot because the renderer treats them differently. But I'm still not sure where the actual breaking point is between "acceptable" and "laggy" for mobile shadows. Would be curious if you noticed a specific number of shadows where things started to choke.