如果我有一个动画元素后跟另一个非动画元素,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使用GPU进行渲染并且使用P标签给它带来了困难.
如果您要强制P标记也使用相同的翻译,那么可能会为您解决问题,如下所示:
p { transform: translateY(0); }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。