Hacker News new | ask | show | jobs
by zerop 929 days ago
But why chrome implements CSS Animation in a way that would cost so much CPU?
1 comments

It’s explained in the article: the image is a square (even though it looks like a circle), rotating a square cannot be done in place, it’ll shift the layout as it rotates, provoking a new paint of the entire page on each animation frame.

This is how the author explains it, but it sounds suspicious to me, I’m not sure a CSS animate rotation would cause shifts in that case.

Yeah, a CSS rotate is just a visual effect - it doesn’t change the item’s actual box size and therefore doesn’t cause page reflows. I suspect there’s something else happening here. It may be that it’s triggering a repaint of adjacent regions or the entire table.
Something running on every animation frame to check if the build is complete maybe?
You are right, this would not cause layout to recalculate, only repaint. And propably repaint only a section of the screen, not the whole window.