背景附件：修复在 Firefox 中无法按预期工作

Question

我正在尝试为我的网站实现以下代码笔：

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

当使用 chrome 打开时，切片的背景图像定位正确，所有堆叠在一起的切片将显示整个图像。

但是，当使用 firefox（版本 Qunatum 60.0.1（64 位））浏览时，您会注意到背景图像的位置不同。在我看来，这与图像的原点或类似的东西有关，但我不知道问题出在哪里。

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

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

这是一个 Firefox 错误吗？

换句话说，我怎样才能让相同的背景图像分布在多个 DIV 中？

我该如何解决这个问题？

谢谢

编辑

这里有几个截图来说明问题：

铬：

火狐：

Answer 1

看起来，虽然违反直觉，但 Firefox（和 Edge）的行为是 intended 并且按照规范是正确的：transform 属性（由 GSAP 库用于动画）使 background-attachment: fixed 表现为scroll。所以我建议删除background-attachment: fixed 并为图像的每个切片用不同的background-position 值替换它。

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