Search code examples
google-chromehardware-accelerationblink

Google Chrome compositor-driven animation affected by jam in main thread


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.


Solution

  • This appears to be a bug in Chrome. I've filed it here: https://bugs.chromium.org/p/chromium/issues/detail?id=592803