背景附件“固定”在 Firefox 中不起作用答案

【问题标题】：Background attachment "fixed" doesn`t work in Firefox背景附件“固定”在 Firefox 中不起作用
【发布时间】：2017-07-17 23:04:25
【问题描述】：

我发现 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，请您在问题本身中创建一个 minimal reproducible example。 Please read this
问题不在于 CSS 而在于 JS，横幅中使用的 owl-carousel 造成了问题。我检查禁用它，背景工作正常。检查你的JS，一定有什么遗漏。或者您可以按照@Pete 提到的方式做一些事情，以便我们提供帮助。
@Lucian thx 发表评论，我会寻找它
background-attachment 不是视差的好选择，因为许多移动浏览器不支持它，而且它还会导致每帧都重新绘制。更好的选择（如果您的布局允许的话）是perspective 和translateZ。请参阅：developers.google.com/web/updates/2016/12/… 了解更多详情

标签： css firefox background background-image fixed

【解决方案1】：

即使没有其余代码，我也几乎可以肯定问题出在具有背景的元素或父元素中的 transform:translate 属性。应用此属性时 - 对于任何轴，X、Y 或 Z，background-attachment:fixed 被禁用。

【讨论】：