我正在使用基于Keith Clark教程的纯css视差,该教程使用3d变换.
transform: translate3d(0, 0, -30px) scale(1.31);
此外,我正在使用带有径向渐变的css渐变蒙版图像,用于视差的图层.
mask-image: radial-gradient(10px circle at 50% 150px, transparent 0, black 100%)
我在codepen上创建了带有示例图形的demo:https://codepen.io/justynaj/full/veyJLz/ .
在某些浏览器中,我看到了可怕的故障.最大的问题是毛刺出现不确定性.我注意到,当我的计算机CPU/GPU加载时,这个故障发生的概率会增加.出现在基于webkit的浏览器中的故障,例如Windows 10上的Opera浏览器或Android上的Chrome浏览器.有时它们在页面加载后立即可见,有时在页面滚动后可见.
示例屏幕截图:https://image.ibb.co/hQcrmG/chrome_android.png.
是什么原因导致这种奇怪的浏览器行为？
