Google Chrome 合成器驱动的动画受主线程卡顿影响

Question

这里是 fiddle 显示的拼图游戏：

我正在使用 CSS 动画为这个 .spinner 元素设置动画。使用 will-change: transform 和 translateZ(0) 将元素本身提升到它自己的合成层作为回退。

现在，我在主线程中执行类似以下操作：

var i = 999999; 

while ( i > 0) {
    i--;
}

由于 CSS 动画是合成器驱动的页面更新，我预计主线程阻塞不会停止旋转器，但它确实停止了。

现在，奇怪的是，如果我将元素的位置从相对位置更改为绝对位置，主线程阻塞不会停止微调器。

是否解释了为什么 position: absolute 使动画合成器驱动而 position: relative 不是？

在 Google Chrome 版本 48.0.2564.116（64 位）上，Mac OS X El Capitan。

Answer 1

这似乎是 Chrome 中的错误。我已经在此处提交了：https://bugs.chromium.org/p/chromium/issues/detail?id=592803

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