background-attachment：修复在firefox中没有按预期工作

Question

我正在尝试为我的网站实现以下codepen：

https://codepen.io/pizza3/pen/NgXowe

使用镶边打开时，切片的背景图像正确定位，并且彼此堆叠的所有切片将显示整个图像。

然而，当使用firefox（版本Qunatum 60.0.1（64位））进行浏览时，您会发现背景图像的位置不同。在我看来它与图像的原点或类似的东西有关，但我无法弄清问题是什么。

我相信问题的相关部分在这里：

.left,
.right {
    position: relative;
    width: 50vw;
    height: 20vh;
    background-attachment: fixed;
    background-size: cover;
    overflow: hidden;
 }

这是一个firefox错误吗？

换句话说，如何在多个DIV中传播相同的背景图像？

我该如何解决这个问题？

由于

修改

这里有一些截图来说明问题：

Chrome：  

Firefox：

Answer 1

看起来虽然反直觉，Firefox（和Edge）的行为是intended并且按照规范更正：transform属性（由GSAP库用于动画）使{ {1}}表现为background-attachment: fixed。因此，我建议删除scroll并将其替换为图片每个切片的不同background-attachment: fixed值。

可能这个答案也是相关的：https://stackoverflow.com/a/43067630/2533215