风格计算为gpu加速动画在铬

这是一个铬只问题。我使用OSX铬56，但我也使用Chrome 57风格计算为gpu加速动画在铬

测试了这个在Windows 8上我有一个动画是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/

本身的铬合金合成线程上处理，并且如果主线程被阻塞时，以不影响该动画。

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

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

UPDATE

我回顾我的代码，增加了三种类型的动画。

第一个反义词是使用固定的视口单元（vh）来翻译该框。
第二个动画是使用固定的像素值来翻译该框。
第三个动画是使用百分比值来翻译框。

我还添加按钮来阻塞主线程 - 如果我打的按钮：

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

我认为这是答案 - 在整个动画过程中，使用翻译百分比值的animatoin需要重新计算样式。

来源

2017-04-11 Nico König

见[时间表的屏幕截图（https://i.stack.imgur.com/wlivh.png）上codepen –

更新演示：http://codepen.io/nicokoenig/full/PmYaOZ / –

风格计算为gpu加速动画在铬

回答

相关问题