Loading…
24
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
Log in to join the discussion
Log In2 Comments
uma8964mo 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.
7
nina8344mo 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.
6