如果我有一个动画元素,然后是另一个非动画元素,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版本有问题。
但是,我认为发生这种情况的原因是translate
风格迫使Chrome使用GPU进行渲染,并且在那里使用P标签会给它带来困难。
如果您要强制 P 标签也使用相同的翻译,那么这可能会为您解决问题,如下所示:
p {
transform: translateY(0);
}
它与 chrome 或您的代码无关
这是你的GPU!特别是如果你有一个M系列GPU(确切地说是笔记本电脑)
因此,当您使用高于或低于显示器本机设置的比例或分辨率时,会发生什么情况,您会给GPU施加太大的压力!
通过操作系统本身更新图形软件或将分辨率恢复为出厂分辨率