css - 背景附件：修复在 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 中传播相同的背景图像？

我该如何解决这个问题？

谢谢

编辑

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

铬合金 ：

火狐：

标签： cssfirefox

Answer 1

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

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