在Firefox中，背景附着属性"fixed"无法正常工作。

Question

我发现在Firefox中存在背景附着问题。我想让我的横幅背景固定不动（http://inkerkam.so-use.ru/），但在Firefox中无效：背景显示，但是它会滚动，然而在Chrome中它可以正常工作。另外一个问题是，在另一个名为“content”的块下面，它也可以正常工作。

我的HTML代码：

    <div class="banner">
    ...
    </div>
...

    <div class="content">
    ....
    </div>

我的CSS：

.banner {
    background: url(/template/img/banner.jpg) no-repeat fixed left top;
}

.content {
    background: url(/template/img/banner.jpg) 0px -690px fixed;
    padding: 80px 0 120px 0;
}

也许有人知道如何解决这个问题？ Firefox版本是最新的。今天更新了。

附言：对我的糟糕英语表示抱歉。

- Егор Соловьев

---

欢迎来到SO，请在问题本身中创建一个[MCVE]。请阅读此内容：http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it - Pete

问题不在CSS上，而是在JS上。横幅中使用的owl-carousel正在创建问题。我尝试禁用它，背景可以正常工作。检查您的JS，可能有一些遗漏。或者您可以像@Pete提到的那样做一些事情，这样我们就可以帮助您了。 - Lucian

@Lucian 谢谢您的评论，我会去找它。 - Егор Соловьев

background-attachment 不是很适合视差效果，因为它在许多移动浏览器上不受支持，并且还会导致每一帧都要重新绘制。更好的选择（如果您的布局允许）是使用 perspective 和 translateZ。详见：https://developers.google.com/web/updates/2016/12/performant-parallaxing。 - Justin Taddei

Answer 1

即使没有代码的其余部分，我几乎可以肯定问题出在 transform:translate 属性上，不管是应用于具有背景的元素还是父元素。当此属性应用于任何轴，包括 X、Y 或 Z 时，background-attachment:fixed 就会被禁用。

- scooterlord