4 ms·

One crucial thing that this article misses out is a key way in which Firefox is currently better than all other production browsers: its WebRender renderer (inc

One crucial thing that this article misses out is a key way in which Firefox is currently better than all other production browsers: its WebRender renderer (incubated in Servo), where everything is rendered on the GPU. This is enabled for most users, but not all yet because GPUs and GPU drivers are amazingly bad. Properties like background-color are not expensive to animate, the same cost as properties like transform and opacity. The “curious little imperfection” of text rendering changing slightly simply doesn’t occur. will-change is obsolete, effectively becoming a noop. Properties like margin-top and top can animate just as smoothly as a transleY transformation. (And it will be calculated subpixelly, though Firefox deliberately still snaps both to pixels, yet a little differently for nuanced layout reasons; so there can still be a very subtle difference between the two, and it’s definitely browser-dependent. But most of the rendering difference between the two in non-Firefox browsers is categorically a bug, not a feature.) It would be good to get all of this mentioned. There are a couple of other related simple factual errors, such as “One is done using margin-top, so it can't be hardware accelerated.”—margin-top can be as hardware accelerated as everything else. But this is my only quibble with the article at this time. The rest is excellent. I was even getting near the end, worried that hover infinite loops wouldn’t be mentioned, but the doom flicker is there. Good stuff.

iaml 6y ago
>Properties like margin-top and top can animate just as smoothly as a transleY transformation. Interesting, I always thought that because margin changes the layout it triggers the associated recalculations thus is slower than translate which doesn't
- chrismorgan 6y ago
  Oh, in absolute terms it’s definitely slower in that way, but the other thing to realise is that layout is cheaper in Firefox than in other production browsers on most computers, because of other parts of Servo that have been landed, such as the CPU-parallelised CSS engine. (Servo CPU-parallelises all of layout, but I don’t think Firefox has adopted that yet.) The consequence is in many cases the cost of layout is still negligible, and it can keep going smoothly. The situation on animating things like margin-top and height is pretty much this: (a) under the old regime, jank was pretty much guaranteed; (b) in Servo, it’s actually pretty hard to cause jank—you’ve got to have a significant number of layers, many more than the typical page will have; (c) Firefox is in between, that if your layers aren’t too complex you will probably avoid jank. (Please note that I’m not encouraging animating layout-affecting properties needlessly; you should almost certainly animate a transformation instead, because it requires strictly less work to be done. But on the other hand, if you have `position: absolute`, it’s cool to know that adjusting `top` (with unconstrained `bottom`) will perform as well as a translateY transformation under WebRender.)

iaml 6y ago

>Properties like margin-top and top can animate just as smoothly as a transleY transformation. Interesting, I always thought that because margin changes the layout it triggers the associated recalculations thus is slower than translate which doesn't

chrismorgan 6y ago
Oh, in absolute terms it’s definitely slower in that way, but the other thing to realise is that layout is cheaper in Firefox than in other production browsers on most computers, because of other parts of Servo that have been landed, such as the CPU-parallelised CSS engine. (Servo CPU-parallelises all of layout, but I don’t think Firefox has adopted that yet.) The consequence is in many cases the cost of layout is still negligible, and it can keep going smoothly. The situation on animating things like margin-top and height is pretty much this: (a) under the old regime, jank was pretty much guaranteed; (b) in Servo, it’s actually pretty hard to cause jank—you’ve got to have a significant number of layers, many more than the typical page will have; (c) Firefox is in between, that if your layers aren’t too complex you will probably avoid jank. (Please note that I’m not encouraging animating layout-affecting properties needlessly; you should almost certainly animate a transformation instead, because it requires strictly less work to be done. But on the other hand, if you have `position: absolute`, it’s cool to know that adjusting `top` (with unconstrained `bottom`) will perform as well as a translateY transformation under WebRender.)