Chromeのページでアニメーションを使用しているときに奇妙な背景のグリッチがあります

Question

アニメーションされた要素にアニメーションが付いていない要素がある場合、バンディング効果とさまざまな色ずれのバグがChromeに表示されます。見えにくいが、私はビデオを記録（ページをズームインするとき、カラーシフトは、簡単に参照する）：https://d26dzxoao6i3hh.cloudfront.net/items/1w1k2e3v0g04142U2A3H/Screen%20Recording%202017-10-30%20at%2011.35%20PM.mov

header { 
 
    height: 100vh; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background: #263238; 
 
} 
 
    
 
header a { 
 
    animation: scroll-down-anim 1s infinite; 
 
} 
 

 
@keyframes scroll-down-anim { 
 
    0% { 
 
    transform: translateY(0); 
 
    } 
 
    100% { 
 
    transform: translateY(10px); 
 
    } 
 
}

<header> 
 
    <a href="#">Animated element</a> 
 
</header> 
 
<p>if i remove this, the glitch disappears</p>

任意のアイデアはどのようにこの問題を解決するために？ <p>要素を削除すると、それは機能します。 Safariのような他のブラウザでも動作します。

Answer 1

これは実際には私にとってはうまくいくので、問題があるのは自分のグラフィックスカードまたはChromeのバージョンだけだと強く思っています。

しかし私は、translateスタイルではChromeにGPUを使用して強制的にレンダリングさせ、Pタグを付けておくと苦労しているということを示唆しています。

あなたは、このように、あなたのための問題を解決するかもしれない、あまりにも同じ変換を使用するPタグを強制した場合：

p { 
    transform: translateY(0); 
    } 

Answer 2

それはクロムまたはあなたのコード

とは何の関係もありません

あなたのgpu！特にあなたがmシリーズGpuを持っている場合（正確にラップトップになるように）

だから、あなたはあなたのモニターのネイティブ設定より高いか低い解像度や解像度を使用していますか？

os自体でグラフィックソフトウェアを更新するか、解像度を工場出荷時の解像度に戻す