3 ms·
"Properties like margin-top can't sub-pixel-render, which means they need to round to the nearest pixel, creating a stepped, janky effect. transform, meanwhile,
by grenoire 6y ago
"Properties like margin-top can't sub-pixel-render, which means they need to round to the nearest pixel, creating a stepped, janky effect. transform, meanwhile, can smoothly shift between pixels, thanks to the GPU's anti-aliasing trickery."
This is a Chrome-case, Firefox (on Windows) aligns both cases to the pixel grid.
- alvarlagerlof 6y agoAnimating margin is bad for other reasons too. Transform and opacity is significantly faster.
- grenoire 6y agoSure, you don't want to dirty the layout tree on each frame.