iOS Safari zooming in on high resolution background images

Question

I'm working on a website, which features a high-resolution background image. The background image is set with the following CSS

#intro {
background: url(https://s3.amazonaws.com/ooomf-com-files/XIBPemROQ9iJdUMOOBmG_IMG_1863.jpg) no-repeat 50% 50% fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}

When viewed on my desktop it works fine.

When viewed in Firefox' responsive view, it works as predicted.

However when viewing this on my iPhone 5 with iOS 7 installed, it will yield this.

There is something going wrong when setting the

background-size: cover;

but I can't seem to figure it out. I've already scoured the internet.

The site itself, in a development environment:

http://websites.terarion.com/ehlen/

And the place where I got the background:

http://unsplash.com/

Answer 1

Wow, it seems Mobile Safari does not support background-attachment: fixed (or, at least doesn't support it well...)

If you remove that, background-size: cover behaves as you expect, but it breaks the expected behavior...

There are some work arounds for Mobile Safari involving fixed-positioned elements behind the content to mimic background-attachment: fixed, if desired.

Off topic, but love the design!