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

Posted 2023-03-05

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

【英文标题】：Weird background glitch when using animation on the page in Chrome

【发布时间】：2018-04-12 00:34:19

【问题描述】：

如果我有一个动画元素后跟另一个非动画元素，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。

【问题讨论】：

什么版本的 Chrome？这对我来说在 Chrome 61、OS X 中运行良好。

【参考方案1】：

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

但是我建议它发生的原因是 translate 样式强制 Chrome 使用 GPU 进行渲染并且在那里有 P 标签给它带来了困难。

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

p 
    transform: translateY(0);
  

【参考方案2】：

它与 chrome 或您的代码无关

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

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

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