Fixed body background scrolls with the page on iOS7

Question

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?

    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

Answer 1

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

---

Reference:

CSS - Background images not displaying properly on mobile browsers

@PaulIrish also noted this:

Fixed-backgrounds have huge repaint 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?

Answer 2

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:

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.

Here is an example of the classic parallax background implementation: 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).