背景附着固定 - Google Chrome

Question

目前在Firefox和Safari上，background-attachment: fixed属性可以工作，但在Chrome上无法响应。

这是一个在FF和Safari中正常工作的页面： http://prestonmcpeak.com/work/enigma.html 这是我想要的在所有三个浏览器中都起作用的效果： http://codyhouse.co/demo/alternate-fixed-scroll-background/index.html 我有一种感觉，这与页面上某个位置标记有关。

      <section class="project-header ">
        <div class="project-background show-for-large-up"></div>
        <section class="enigma"></section>
      </section>

        .project-header {
            section {
               position: fixed;
               height: 100%;
               width: 100%;
               top: 0;
               left: 0;
               z-index: -1;
               &.enigma {
                  background-size: contain;
                  background-attachment: fixed;
               }
            }
        .project-background {
            padding: 20% 0;
            margin: 0;
        }
        .enigma {
            background: url(../assets/img/enigma-1-m.jpg) no-repeat center top;
        }

- Preston McPeak

---

我感觉你应该给我们你当前的代码以及你尝试过的内容... 目前，我只能告诉你应该尝试将元素的position属性设置为static。 - Mr.Web

你有什么问题？解释一下工作和非工作之间的区别。 - vitdes

在 Firefox 上，背景图像在滚动时保持固定，而在 Chrome 上，图像会随页面移动。 - Preston McPeak

@Mr.Web，我添加了一些代码，如果这有助于您理解背景，我也是在使用SCSS编码。 - Preston McPeak

Answer 1

好的，我认为我知道问题出在哪里了。在CSS-Tricks论坛上有人遇到了同样的问题。

问题出在在你应用固定背景的div的父元素之一上使用了-webkit-transform。

要解决这个问题，你需要从具有"class name"为"main-section"的部分中删除-webkit-transform。

所以这个：

.main-section {
 -webkit-transform: translate3d(0,-45px,0);
  margin-bottom: -45px;
}

应该长成这个样子：

.main-section {
  margin-bottom: -45px;
}

我成功复制并修复了您提供的Enigma网址上的问题。 请告诉我这是否解决了您的问题。

- igorM

---

太棒了！你找到了缺失的链接。我正在加载基础框架，那是他们CSS的默认样式，感谢你发现了这个问题！ - Preston McPeak

令人烦恼的是，这个问题似乎仍然存在。在我的情况下，我实际上不得不删除所有transform: translate3d(...)样式，即使它们不是具有固定背景图像的元素的父级元素。 - zelanix

Answer 2

有一种更简单的方法是通过Javascript实现。由于这个问题特别出现在使用Webkit布局引擎（Chrome，Safari，Yandex等）的浏览器中，您可以创建一个条件来改变这些浏览器中的background-attachment属性：

if($.browser.webkit)
  $(".project-header section.enigma").css('background-attachment', 'scroll');

这是针对jQuery的，但如果您更喜欢纯JavaScript，则条件应为：

if(~navigator.userAgent.toLowerCase().indexOf("webkit"))

这个解决方案解决了我的（slick）滑块问题，它在所有幻灯片的父元素中使用transform: translate3d(...)。由于我还希望它使用每个幻灯片中的background-size: cover属性更改背景，因此这是最有效的解决方案。

- Armfoot