chrome中gpu加速动画的样式计算答案

【问题标题】：style calculation for gpu accelerated animation in chromechrome中gpu加速动画的样式计算
【发布时间】：2017-09-07 09:10:33
【问题描述】：

这是一个仅限 chrome 的问题。我在 OSX 上使用 chrome 56，但我也在 Windows 8 上使用 chrome 57 进行了测试。

我有一个 gpu 加速的动画，使用will-change: transform 和一个使用transform: translateY(...) 在屏幕上移动元素的关键帧动画。

.block {
    height: 20vh;
    width: 20vh;
    background-color: black;
    animation: move 5s linear infinite;
    will-change: transform;
}

@keyframes move {
    0% { transform: translateY(0%); }
    50% { transform: translateY(400%); }
    100% { transform: translateY(0%); }
}

codepen 示例：http://codepen.io/nicokoenig/full/PmYaOZ/

动画本身在 chromes 合成器线程上处理，因此如果主线程被阻塞，则不会受到影响。

当我录制时间线时，我仍然看到每一帧都有一个样式计算。

为什么 chrome 需要重新计算样式，即使动画是在合成器线程上处理的？

更新

我查看了我的代码并添加了三种类型的动画。

第一个动画使用固定视口单位 (vh) 来平移框。
第二个动画使用固定的像素值来平移框。
第三个动画使用百分比值来平移框。

我还添加了按钮来阻塞主线程 - 如果我点击按钮：

第一个和第二个动画仍然会在屏幕上移动，第三个会冻结。

我认为这就是答案 - 使用带有百分比值的翻译的动画需要在整个动画期间重新计算样式。

【问题讨论】：

见screenshot of timeline
在 codepen 上更新了演示：codepen.io/nicokoenig/full/PmYaOZ

标签： css google-chrome browser