A Tiny CSS Animation Caused 60% CPU and 25% GPU Usage on My M2 MacBook
2025-07-23
A seemingly insignificant CSS animation was mysteriously consuming 60% CPU and 25% GPU on my M2 MacBook. This post details the debugging process using Chrome DevTools' performance profiling tools to pinpoint the culprit: animating the `height` property. The author explains the browser's rendering pipeline and demonstrates how switching to the cheaper `transform` property (using a clever workaround to avoid visual artifacts) dramatically reduced resource consumption to under 6% CPU and 1% GPU.
Read more
Development
browser rendering