3

目前在 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;
        }
4

2 回答 2

2

好的，我想我知道问题所在了。CSS-Tricks论坛上的某个人也遇到了同样的问题。

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

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

所以这：

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

应该是这样的：

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

我设法复制并修复了您提供的 Enigma 网址上的问题。请让我知道这是否可以解决您的问题。

于 2015-04-05T01:20:12.163 回答
0

通过 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"))

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

于 2015-07-30T13:20:49.003 回答