Don't Animate Height
9 months ago
- #Browser Rendering
- #Performance Optimization
- #CSS Animations
- The app Granola was using 60% CPU and 25% GPU on an M2 MacBook due to a CSS animation.
- Chrome dev tools revealed the issue was with the 'action bar' repainting every frame because of a CSS height transition.
- Animating the 'height' property triggers layout, painting, and compositing, making it expensive.
- Cheaper alternatives include using 'transform' and 'opacity' which only trigger compositing.
- A solution was implemented using 'transform: translate' to simulate height changes, reducing CPU usage from 15% to 6% and GPU usage significantly.
- Understanding the browser's rendering pipeline is crucial for optimizing CSS animations.