我正在使用基于Keith Clark教程的纯css视差,该教程使用3d变换.
transform: translate3d(0,-30px) scale(1.31);
此外,我正在使用带有径向渐变的css渐变蒙版图像,用于视差的图层.
mask-image: radial-gradient(10px circle at 50% 150px,transparent 0,black 100%)
我在codepen上创建了带有示例图形的演示：https://codepen.io/justynaj/full/veyJLz/.
在某些浏览器中,我看到了可怕的故障.最大的问题是毛刺出现不确定性.当我的计算机cpu / GPU加载时,我注意到这个故障发生的可能性.
出现在基于webkit的浏览器中的故障,例如Windows 10上的Opera浏览器或Android上的Chrome浏览器.有时它们在页面加载后立即可见,有时在页面滚动后可见.
截图示例：https://image.ibb.co/hQcrmG/chrome_android.png.
是什么原因导致这种奇怪的浏览器行为？
解决方法
当我尝试使用普通背景色而不是JPEG img元素时,滚动时的撕裂(毛刺)显着减少：
https://codepen.io/Pendrokar/full/gGKGZO/
<img style="background-color:red" alt="" class="bg-img" aria-hidden="true">
使用“样式”仅用于快速演示目的,因为替换“src”比删除和添加CSS规则更快.如果这个解决方案足够好,那么用“div”替换“img”元素.
原文地址：https://www.jb51.cc/css/214929.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
