Question

如果我有一个动画元素后跟另一个非动画元素，则Chrome中会出现条带效果和各种变色错误。很难看，但我录制了一个视频（如果放大页面，颜色会发生变化，更容易看到）：https://d26dzxoao6i3hh.cloudfront.net/items/1w1k2e3v0g04142U2A3H/Screen%20Recording%202017-10-30%20at%2011.35%20PM.mov

＆＃13;

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

＆＃13;

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

＆＃13;

任何想法如何解决这个问题？如果我删除了<p>元素，它就可以了。也适用于任何其他浏览器，如Safari。

Answer 1

这实际上对我有用，所以我强烈怀疑它只是你的显卡或Chrome版本有问题。

但是我会建议发生这种情况的原因是translate样式迫使Chrome使用GPU进行渲染并且在那里使用P标签会给它带来困难。

如果你强迫P标签也使用相同的翻译，那么可能会解决你的问题，如下所示：

p {
    transform: translateY(0);
  }

Answer 2

它与chrome或您的代码无关

它是你的gpu！特别是如果你有一个m系列的Gpu（确切地说是笔记本电脑）

所以当你使用高于或低于你的显示器原生设置的比率或分辨率时，你会对gpu施加太大的压力！

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

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

2 个答案: