在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。

- passatgt

---

Chrome的哪个版本？在Chrome 61，OS X上，这对我来说运行良好。 - Daniel

你尝试过使用 translate3d 吗？ - Alvin

Answer 1

这与Chrome或您的代码无关

是您的GPU！特别是如果您有M系列GPU（确切地说是笔记本电脑）

所以当您使用比显示器本机设置更高或更低的比例或分辨率时，会对GPU施加过大的压力！

通过操作系统本身更新您的图形软件或将分辨率恢复到出厂分辨率

- legend

Answer 2

这对我来说实际上是有效的，所以我强烈怀疑只是你的显卡或Chrome版本出了问题。

然而，我建议发生这种情况的原因是translate样式强制Chrome使用GPU进行渲染，并且P标签会给它带来麻烦。

如果您强制P标签也使用相同的翻译，那么可能会为您解决问题，就像这样：

p {
    transform: translateY(0);
  }

- Nico Westerdale