New in Chrome DevTools in Chrome 131 is the ability to easily spot + debug non-composited animations from within the Performance tab. When you’ve recorded a trace, the animations track now shows the following:
- Non-composited animations are marked with red triangles.
- Upon selecting, you now see the reason + relevant properties for why compositing failed.
Here’s a before and after set of screenshots:
(For CSS Animations the track now also uses the name of keyframes instead of the anonymous “Animation” label)
Most common reason why an animation can’t be composited is that you are animating a property that cannot be composited (such as animating height or animating custom properties), but there are also other reasons such as using an animation-composition that is not replace.
~
This information was always present in Blink – you could find it through chrome://histograms – but it was never surfaced in DevTools until Paul Irish picked up the issue and piped the info from Blink into DevTools.
Building on Paul’s works, I took it over the finish line by adding all remaining CompositorAnimations::FailureReasons and also adding the red warning triangle, thereby allowing us to close this 11 year old feature request.
~
🔥 Like what you see? Want to stay in the loop? Here's how: