In iOS a fixed cover background is handled using the whole document height instead of using only the viewport's height.
Example of an error: erroneous working
This will be stretched as big as the document's height, so the background image will displayed zoomed:
body {
background: url(https://newevolutiondesigns.com/images/freebies/nature-hd-background-9.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Solution: fixed with CSS
If you make the element itself (body:after) fixed, this code works like a charm, by using only one CSS rule:
body:after{
content:"";
position:fixed; /* stretch a fixed position to the whole screen */
top:0;
height:100vh; /* fix for mobile browser address bar appearing disappearing */
left:0;
right:0;
z-index:-1; /* needed to keep in the background */
background: url(https://newevolutiondesigns.com/images/freebies/nature-hd-background-9.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
More info: Stackoverflow: Background-image size cover not working on IOS
Live demo of the solution: Doklist.com, Doklist.com.br