Html 修复了 iOS7 上正文背景随页面滚动的问题

Fixed body background scrolls with the page on iOS7

提问by Gloria

I've used the following CSS to ceate a fixed body background. It works well on almost all browsers except the new iOS7. On the latter the background is not fixed anymore. It scrolls with the page. Any idea how to fix the problem?

我使用以下 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;     
} 

CHEERS

干杯

回答by Labu

I'll try and find some reference, but mobile browsers force background: scrollbecause the repainting is too expensive.

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

---

---

Reference:

参考：

CSS - Background images not displaying properly on mobile browsers

CSS - 背景图像无法在移动浏览器上正确显示

@PaulIrishalso noted this:

@PaulIrish也注意到了这一点：

Fixed-backgrounds have hugerepaint cost and decimate scrolling performance, which is, I believe, why it was disabled.

固定背景有巨大的重绘成本并降低滚动性能，我相信这就是它被禁用的原因。

There are ways around this, though.. but it's not a quick fix. Have a look at the following question and it's comment.

不过，有一些方法可以解决这个问题……但这不是一个快速解决方案。看看下面的问题，它的评论。

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

Android/Mobile Webkit CSS 背景附件：已修复不起作用？

回答by Frinz

You can also use Backstretchjquery.

您还可以使用Backstretchjquery。

It is not heavy and works well on iOS 7.

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

回答by ctrlplusb

I would recommend looking into scrollr (https://github.com/Prinzhorn/skrollr). It's a parallax library allowing you to achieve the same effect. They have carefully considered issues with mobile devices too:

我建议查看滚动条（https://github.com/Prinzhorn/skrollr）。这是一个视差库，可让您实现相同的效果。他们也仔细考虑了移动设备的问题：

Some words on why this is an important milestone and why others failed: Mobile browsers try to save battery wherever they can. That's why mobile browsers delay the execution of JavaScript while you are scrolling. iOS in particular does this very aggressively and completely stops JavaScript. In short, that's the reason why many scrolling libraries either don't work on mobile devices or they come with their own scrollbar which is a usability nightmare on desktop. It was an important requirement while I developed skrollr that I don't force you to scroll the way I want it. skrollr on desktop uses a native scrollbar and you can scroll the way you want to (keyboard, mouse, etc.).

You just told me it doesn't work on mobile, but why does it? The answer is simple. When using skrollr on mobile you don't actually scroll. When detecting a mobile browser, skrollr disables native scrolling and instead listens for touch events and moves the content (more specific the #skrollr-body element) using CSS transforms.

关于为什么这是一个重要的里程碑以及为什么其他人失败的一些话：移动浏览器尽可能地节省电池。这就是移动浏览器在您滚动时延迟 JavaScript 执行的原因。尤其是 iOS，它非常积极地做到了这一点，并且完全停止了 JavaScript。简而言之，这就是为什么许多滚动库要么不能在移动设备上运行，要么带有自己的滚动条的原因，这在桌面上是可用性的噩梦。在我开发 skrollr 时，一个重要的要求是我不会强迫你按照我想要的方式滚动。桌面上的 skrollr 使用原生滚动条，您可以按照自己的方式滚动（键盘、鼠标等）。

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

Here is an example of the classic parallax background implementation: http://prinzhorn.github.io/skrollr/examples/classic.html

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

Stated on the example page, another gem worth noting:

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

Degrades without JavaScript (could be disabled on mobile without breaking everything).

在没有 JavaScript 的情况下降级（可以在移动设备上禁用而不会破坏一切）。

回答by xess

I noticed the background-attachment problem when upgrading to iOS7. I had to fix the issue using Javascript as I couldn't figure out a solution with CSS alone.

我在升级到 iOS7 时注意到了后台附件问题。我不得不使用 Javascript 解决这个问题，因为我无法单独使用 CSS 找出解决方案。

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

回答by tosca

I have been searching, and used basics from the Prinzhorn solution on github. Thanks, as it works perfectly. I only have one background-image that showed on every device, except the iPad, and now the image background-attached = fixed and the image background-size:cover.

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

回答by Ylama

I had a very simplesolution for this, after struggling with all the methods of fixing this.

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

i had the problem on my mobile IOS devices.

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

css(desktop)

css（桌面）

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

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

Then i overwrite it with media query removing "fixed" as background attachment.

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

css(mobile)

css（移动）

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

    background-attachment: initial;

}
}

initial - Sets this property to its default value. I think because IOS doesn't accept 'fixed' it falls back to a default value it accepts, scroll.

初始 - 将此属性设置为其默认值。我认为因为 IOS 不接受“固定”，所以它会回退到它接受的默认值，滚动。

This worked for me on every device. Hope it helps someone else as well.

这在每台设备上都对我有用。希望它也能帮助其他人。

回答by pjdux

Messing around with background size I found that if your desktop size could be cover and position could be fixed then on the media query make the background-size: 100% 100vh

弄乱背景大小我发现，如果您的桌面大小可以是封面并且可以固定位置，那么在媒体查询中 background-size: 100% 100vh

I posted the answer on another question here.

我在这里发布了另一个问题的答案。