Background size on iOS - html

Question

I've spent the morning doing research on the following issue. I'm making a one page site, using a lot of images. I'm aware that Safari is known for its weird handling of background-attachment:fixed, but that's working fine; my problem is background-size:cover is not working in conjunction with fixed.
I have 5 pages, all of which have a height or min-height of 100%. The last page is fixed like this:
#div5 {
height:100%;
width:100%;
position: relative;
background-image: url("img/background.jpg");
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
On iOS (in both Chrome and Safari) the background image is scaled to cover the full webpage, so it's really stretched.
At the same time, page 4 has the following css:
#div4 {
min-height:100%;
width:100%;
background:url(img/portfoliobg.jpg);
overflow: auto;
background-size: cover;
}
and this works like a charm.
So, something makes the browser behave really weirdly when combining fixed and cover. Does anyone have a solution to this?

Answer 1

Use another div with position:fixed to make the background fixed.
Like this:
http://codepen.io/anon/pen/OVebNg
JADE
.fixed
.bgcover
SCSS
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
.bgcover {
background-image: url('http://globe-views.com/dcim/dreams/winter/winter-04.jpg');
background-size: cover;
width: 100%;
height: 100%;
}
}
Hope this help.

Answer 2

Short answer: you can’t (for now).
You can play with #media screen and (max-width: 1024px) {} but for now iPad Pro have resolution more then ordinary monitors.
I offer you to disable fixed attachment for mobiles via this way:
Main CSS file:
.parallax {
background-attachment: fixed;
background-size: cover;
}
Main HTML
<script type="text/javascript">
if (navigator.userAgent.match(/(iPad|iPhone|iPod|Android|Silk)/gi)) {
document.write("<link rel=\"stylesheet\" href=\"fixparallax.css\" />");
}
</script>
Additional fixparallax.css
.parallax {
background-attachment: scroll !important;
}