如果我有一个动画元素,紧随其后的是一个非动画元素,在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。
translate3d
吗? - Alvin