固定的身体背景与iOS7上的页面滚动

Question

我使用以下CSS来固定固定的身体背景。除了新的iOS7之外，它几乎适用于所有浏览器。在后者上，背景不再固定。它随页面滚动。知道如何解决这个问题吗？

body
{
background-color: #000; 
background-image: url('../pics/backgrounds/blackWhite.jpg');
background-repeat: no-repeat; 
background-position: center;
background-attachment: fixed;       
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;     
} 

干杯

Answer 1

我会尝试找一些参考，但移动浏览器强制background: scroll，因为重新绘制太昂贵。

---

参考：

CSS - Background images not displaying properly on mobile browsers

@PaulIrish也注意到了这一点：

固定背景具有巨大的重绘成本和大幅滚动性能，我相信，这是为什么它被禁用。

虽然有这方面的方法，但它不是一个快速解决方案。看看下面的问题及其评论。

Android/Mobile Webkit CSS Background-Attachment:Fixed Not Working?

Answer 2

你也可以使用Backstretch jquery。

它并不重，在iOS 7上运行良好。

Answer 3

我建议看看滚动（https://github.com/Prinzhorn/skrollr）。它是一个视差库，可以让您达到同样的效果。他们也仔细考虑过移动设备的问题：

有人说为什么这是一个重要的里程碑以及为什么其他人失败了：移动浏览器试图在任何可能的地方节省电池。这就是移动浏览器在滚动时延迟执行JavaScript的原因。特别是iOS非常积极地完成这项工作并完全停止了JavaScript。简而言之，这就是为什么许多滚动库无法在移动设备上运行，或者它们带有自己的滚动条，这是桌面上的可用性噩梦。这是一个重要的要求，当我开发skrollr时，我不会强迫你滚动我想要的方式。桌面上的skrollr使用本机滚动条，您可以按照您想要的方式滚动（键盘，鼠标等）。

你刚刚告诉我它在手机上不起作用，但为什么呢？答案很简单。在移动设备上使用skrollr时，实际上并不滚动。当检测到移动浏览器时，skrollr会禁用本机滚动，而是使用CSS转换来侦听触摸事件并移动内容（更具体地说是#skrollr-body元素）。

以下是经典视差背景实现的示例：http://prinzhorn.github.io/skrollr/examples/classic.html

在示例页面上，另一个宝石值得注意：

没有JavaScript的降级（可以在移动设备上禁用而不会破坏所有内容）。

Answer 4

升级到iOS7时我注意到了背景附件问题。我不得不使用Javascript解决问题，因为我无法找到单独使用CSS的解决方案。

if (iosVersion >= 7) {
    $(document).scroll(function() {
        $('#background').css('background-position', '0px ' + $(document).scrollTop() + 'px');
    });
}

Answer 5

在解决了解决这个问题的所有方法之后，我有一个非常简单的解决方案。

我在我的移动IOS设备上遇到了问题。

css（桌面）

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}

.widget-wrap {
background-attachment: scroll;
}

然后我用媒体查询覆盖它，删除“固定”作为背景附件。

css（手机）

@media (max-width: 767px) {
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {

    background-attachment: initial;

}
}

initial - 将此属性设置为其默认值。我认为因为IOS不接受'固定'它会回退到它接受的默认值，滚动。

这在我的每台设备上都适用。希望它也可以帮助别人。

Answer 6

我一直在搜索，并在github上使用了Prinzhorn解决方案的基础知识。谢谢，因为它完美无缺。我只有一个背景图像显示在每个设备上，除了iPad，现在图像背景附加=固定和图像背景大小：封面。

Answer 7

随着背景大小的混乱，我发现如果您的桌面大小可以覆盖并且位置可以修复，那么在媒体查询上制作background-size: 100% 100vh

我在another question here.上发布了答案