3 ms·

https://motion.dev/guides/performance https://motion.dev/guides/performance: some of the information here is incorrect or inapplicable for Firefox these days: w

https://motion.dev/guides/performance https://motion.dev/guides/performance: some of the information here is incorrect or inapplicable for Firefox these days: with WebRender, which I think is now enabled by default for everyone with the old pathway going away altogether soon, paint and composite are merged, with what were formerly paint operations no more expensive than what were formerly composite operations—so things like background-color, clip-path, box-shadow and border-radius are all cheap to animate in Firefox. It’s not a big deal by any means, because the underlying concepts of caring about performance and some things being slow still hold, but my loyal Firefox heart yearns for at least a mention of it. If you eschew layout-affecting properties (which are an actual defined concept that you can readily reason about, unlike the paint/composite divide where you’re left guessing which things are fast and which will slow you down today), it’s extremely difficult to get browser-managed animations (as distinct from requestAnimationFrame-driven ones) below 60fps in Firefox. Servo had a nice stress test demo back five years ago where production browsers managed 5–15 frames per second and Servo a few hundred; that particular demo is roughly useless now because everyone’s improved to at least 60fps (yay!), but WebRender can still handle a broader variety of things and cope with much heavier documents and animations.

SirHound 5y ago
Yeah I think this is fair, in the development of Motion One I have been very impressed by Firefox when I have looked at it, though I've concentrated on Webkit and Chrome for obvious reasons. At the same time I have noticed that although background-color animations are hardware-accelerated, things like box-shadow actually still aren't, which I was surprised by. Or if they are, blocking the main thread somehow still pauses these animations. At some point I'll do a more extensive example to hash out what is/isn't supported.
- chrismorgan 5y ago
  I don’t know the current situation especially as regards WebRender in Firefox, but WebRender did box-shadow in a shader back in 2015: https://pcwalton.github.io/2015/12/21/drawing-css-box-shadows-in-webrender.html https://pcwalton.github.io/2015/12/21/drawing-css-box-shadow.... I don’t really know what I’m talking about with all this stuff in much depth; I’m mostly reporting what I’ve heard and learned over the years of watching from the outside and keeping half an eye on things, but never quite learning about them in detail. Since we’re talking box shadows and performance, https://raphlinus.github.io/graphics/2020/04/21/blurred-rounded-rects.html https://raphlinus.github.io/graphics/2020/04/21/blurred-roun... is also some fun work in the space.

SirHound 5y ago

Yeah I think this is fair, in the development of Motion One I have been very impressed by Firefox when I have looked at it, though I've concentrated on Webkit and Chrome for obvious reasons. At the same time I have noticed that although background-color animations are hardware-accelerated, things like box-shadow actually still aren't, which I was surprised by. Or if they are, blocking the main thread somehow still pauses these animations. At some point I'll do a more extensive example to hash out what is/isn't supported.

chrismorgan 5y ago
I don’t know the current situation especially as regards WebRender in Firefox, but WebRender did box-shadow in a shader back in 2015: https://pcwalton.github.io/2015/12/21/drawing-css-box-shadows-in-webrender.html https://pcwalton.github.io/2015/12/21/drawing-css-box-shadow.... I don’t really know what I’m talking about with all this stuff in much depth; I’m mostly reporting what I’ve heard and learned over the years of watching from the outside and keeping half an eye on things, but never quite learning about them in detail. Since we’re talking box shadows and performance, https://raphlinus.github.io/graphics/2020/04/21/blurred-rounded-rects.html https://raphlinus.github.io/graphics/2020/04/21/blurred-roun... is also some fun work in the space.