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

You can also use Backstretch jquery.

It is not heavy and works well on iOS 7.

Answer 3

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).

Answer 4

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.

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

Answer 5

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

i had the problem on my mobile IOS devices.

css (desktop)

#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)

@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.

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

Answer 6

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.

Answer 7

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

I posted the answer on another question here.