css background-size: contain ignored on IOS?

Question

i am using stellar.js on my site. this works perfectly on all devices and browsers, except of iOS Safari.

You can find an example of this error here: http://www.pencilscoop.com/demos/Parallax_Project/Part1/index.html On iPhone Slide 7/8 looks like this (background-size: cover; is not covered and the other bg is not shown at all):

i tried different css attributes like background-position: center center, background-size: 620px 230px;, background-size: contain; and so on, but none of them worked. Does anybodyhave an idea how to contain a bg-image on iOS safari?

Answer 1

ok, i finally found a solution to fix it on iOS devices:

.slide {        
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;

    background-origin: content-box;
    -moz-background-origin: content;
    -webkit-background-origin: content-box;     
}

@media 
  /* ----------- iPhone 4 and 4S ----------- */
  only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2),
  /* ----------- iPhone 5 and 5S ----------- */
  only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2),
  /* ----------- iPhone 6 ----------- */
  only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2),
  /* ----------- iPhone 6+ ----------- */
  only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3),
  /* ----------- iPad mini ----------- */
  only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1),
  /* ----------- iPad 1 and 2 ----------- */
  only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1),
  /* ----------- iPad 3 and 4 ----------- */
  only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .slide {
        background-attachment: scroll;
    }
}