div Hintergrundbild und iOS Mobile Safari Kompatibilitätsprobleme

Question

Ich habe ein einzelnes '.home' div mit einem Hintergrundbild, das ich vertikal in das besagte Div passen möchte. Es funktioniert perfekt auf Mobilgeräten, außer beim iPhone-Surfen mit Mobile Safari.

HTML-Code:

<div id="home" class="home"> <!-- This div has a background image --> 
    <div class="overlay sections"> 
     <div class="container text-center"> 
      <div class="row"> 
       <div class="div-menu"> 
        <header class="cd-header"> 
         <div id="cd-logo"> 
          <a href="index.html"><img id="logo-animated" src="assets/images/logos/vera_sing_logo.png" alt="Logo"></a> 
         </div> 
         <a class="cd-menu-trigger" href="#main-nav"><span></span></a> 
        </header> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Dies ist die CSS:

.home{ 
     background: url(../images/horizontal/home.jpg) no-repeat center top fixed; 
     background-size: cover; 
     -moz-background-size: cover; 
     -webkit-background-size: cover; 
     -o-background-size: cover; 
     width: 100%; 
     overflow: hidden; 
    } 

ich ein offenes Repository haben, so dass Sie die Webseite überprüfen (und Quellcode) leben hier: https://fieel.github.io/VeraSings/

Wenn Sie es mit Mobile Safari öffnen, sehen Sie nur die obere linke Ecke des Bildes, was offensichtlich nicht korrekt ist. Das ist richtig, wenn Sie mit meinem Android-Gerät mit Mobile Chrome surfen:

Was verursacht das Kompatibilitätsproblem? Was ist der Teil meines CSS, der Sachen auf Mobile Safari bricht?

Answer 1

weil data-attachment : fixed nicht wirklich funktioniert. Werfen Sie einen Blick für eine Weile https://codepen.io/gentlemedia/pen/JJEzwO