在Chrome中的页面上使用动画时出现奇怪的背景故障

Question

如果我有一个动画元素后跟另一个非动画元素,Chrome中会出现条带效果和各种颜色转移错误.很难看,但我录制了一个视频(如果放大页面,颜色会发生变化,更容易看到):https://d26dzxoao6i3hh.cloudfront.net/items/1w1k2e3v0g04142U2A3H/Screen%20Recording%202017-10-30 %20原子%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);
  }