クロムのgpuアクセラレーションアニメーションのスタイル計算

Question

これはクロムの問題です。私はOSX上のクロム56を使用していますが、私はまた、私はGPUがwill-change: transformを使用して、加速されたアニメーションと画面の周りの要素を移動するtransform: translateY(...)を使用してキーフレームアニメーションを持つクロム57

を使用して、Windows 8上でこれをテストしました。 codepenに

.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%); } 
} 

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

アニメーション自体はクロームコンポジのスレッドで処理され、メインスレッドがブロックされた場合にその影響を受けません。

私はタイムラインを記録するとき、私はまだ各フレームのスタイル計算があることがわかります。

なぜ、アニメーションがコンポジタスレッドで処理されても、クロムはスタイルを再計算する必要がありますか？

---

UPDATE

私は私のコードを見直し、アニメーションの3種類を追加しました。

• 最初のアニメーションは固定ビューポートユニット（vh）を使用してボックスを翻訳しています。
• 2番目のアニメーションは固定ピクセル値を使用してボックスを翻訳しています。
• 3番目のアニメーションは、パーセント値を使用してボックスを翻訳しています。

Iはまた、メインスレッドをブロックするためのボタンを追加 - 私はボタンを押した場合：

第一及び第二のアニメーションは、まだ第1のフリーズ、画面の周囲に移動することになります。

私はそれが答えだと思っています - パーセント値での翻訳を使用するanimatoinは、アニメーション全体でスタイルを再計算する必要があります。

Answer 1

この現象は、既知のクロムバグです。

https://bugs.chromium.org/p/chromium/issues/detail?id=711645 https://bugs.chromium.org/p/chromium/issues/detail?id=389359