使用带有3d变换的css渐变蒙版图像时出现毛刺

时间:2017-10-03 14:31:20

标签: css css3 webkit css-transforms

我使用基于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上创建了带有示例图形的演示:https://codepen.io/justynaj/full/veyJLz/

在某些浏览器中,我看到了可怕的故障。最大的问题是毛刺出现不确定性。我注意到当我的计算机CPU / GPU加载时,这个故障发生的概率会增加。 出现在基于webkit的浏览器中的故障,例如Windows 10上的Opera浏览器或Android上的Chrome浏览器。有时它们在页面加载后立即可见,有时在页面滚动后可见。

示例截图:

enter image description here

是什么原因导致这种奇怪的浏览器行为?

1 个答案:

答案 0 :(得分:4)

当我尝试使用普通的背景色而不是JPEG img元素时,滚动时的撕裂(毛刺)显着减少:

https://codepen.io/Pendrokar/full/gGKGZO/

<img style="background-color:red" alt="" class="bg-img" aria-hidden="true">   

二手&#34;风格&#34;仅用于快速演示目的,如替换&#34; src&#34;比删除和添加CSS规则更快。如果这个解决方案足够好,那么替换&#34; img&#34;元素与&#34; div&#34;。