Here is the fiddle showing the puzzler:
https://jsfiddle.net/1rk65nxj/
I am animating this .spinner
element using CSS animation. The element itself is promoted to its own compositing layer using will-change: transform
and translateZ(0)
for fallback.
Now, i jam the main thread doing something like:
var i = 999999;
while ( i > 0) {
i--;
}
Since CSS animations are compositor-driven page updates, I expected the main thread jam not to halt the spinner but it does.
Now, the weird thing is, if I change the position of the element from relative to absolute, the main thread jam does not halt the spinner.
Any explanation on why position: absolute
makes the animation compositor-driven and position: relative
not?
On Google Chrome Version 48.0.2564.116 (64-bit), Mac OS X El Capitan.
This appears to be a bug in Chrome. I've filed it here: https://bugs.chromium.org/p/chromium/issues/detail?id=592803