固定背景附件—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;
        }

Answer 1

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

问题是在您要应用固定背景的 div 的父元素之一上使用 -webkit-transform。

要解决此问题，您必须从 class 名称为 "main-section" 的部分中删除 -webkit-transform。

所以这个：

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

应该是这样的：

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

我设法在您提供的 Enigma url 上复制并修复了问题。如果这能解决您的问题，请告诉我。

Answer 2

通过 Javascript 有一个更简单的方法。由于这是使用 Webkit layout engine（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 属性更改背景，因此这是最有效的解决方案。

固定背景附件—Google Chrome

Background Attachment Fixed—Google Chrome

css

fixed

background-attachment