Background image not displayed properly on iPad and iPhone - html

Question

I've encountered an odd issue. I've been building this website using bootstrap3 and everything seems to work fine, until I try it on the iPad or iPhone. My background image seems to be rendered wrong. It is stretched way too much and you have to scroll 10 times until you reach the first content.
This is my website where the issue is found: www.socialook.net
Here is the CSS for the section with issues:
#home {
background: url(img/background.png) no-repeat center center fixed;
height: 100vh;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#e6e6e6;
text-align: center;}
UPDATE: I changed height:100% instead of height:100vh and nothing really changed in ipad or iphone. The image is very zoomed.
Also, eliminating the height completely will cause the background picture to have a height of only about 5px. Any ideas?

Answer 1

I've found the following solution to fix the ipad and iphone problem:
/* fix for the ipad */
#media (min-device-width : 768px) and (max-device-width : 1024px) {
#home {
background-attachment: scroll;
/* default height landscape*/
height: 768px;
}
.ipadfix{
height: 300px !important;
}
img.ipadfix{
width:100% !important;
height:auto !important;
}
}
/* fix for the ipad */
#media (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: portrait) {
#home {
/* default height landscape*/
height: 1024px;
}
}
/* fix for the iphone */
#media (min-device-width : 320px) and (max-device-width : 568px) {
#home {
background-attachment: scroll;
/* default height landscape*/
height: 320px;
}
.ipadfix{
height: 150px !important;
}
img.ipadfix{
width:100% !important;
height:auto !important;
}
}
/* fix for the iphone */
#media (min-device-width : 320px) and (max-device-width : 568px) and (orientation: portrait) {
#home {
/* default height landscape*/
height: 568px;
}
}

Answer 2

Changing height from 100vh to 100% loses the scrolling bug:
#home {
background: url(img/background.png) no-repeat center center fixed;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#e6e6e6;
text-align: center;
}
but then your background-image is still not displayed correctly. I'm looking for a way around this.
UPDATE:
This is the closest I've got in order to get the image to look 'normal':
#media (max-width: 425px) {
#home {
background-size: 100% 14% !important;
zoom:1;
}
}