使用带有 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">   

使用“样式”仅用于快速演示目的，因为替换“src”比删除和添加 CSS 规则要快。如果此解决方案足够好，则将“img”元素替换为“div”。