css - 使用带有 3d 变换的 css 渐变蒙版图像时出现故障

Question

我正在使用基于 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 浏览器。有时它们在页面加载后立即可见，有时在页面滚动后可见。

示例截图:

知道是什么导致了这种奇怪的浏览器行为吗？

Answer 1

当我尝试使用纯背景颜色而不是 JPEG img 元素时，滚动时的撕裂(故障)显着减少:

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

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

使用“style”只是为了快速演示，因为替换“src”比删除和添加 CSS 规则更快。如果此解决方案足够好，则将“img”元素替换为“div”。