Safari zeigt keine Header-Hintergrundbilder an

Question

In meiner Website werden der obere Header-Hintergrund und der "Kreation Team" Div-Hintergrund in Safari auf iPads und iPhones nicht angezeigt, aber es ist auf Imacs und Macbooks sichtbar. Ich meine in kleinen Geräten sind die Hintergrundbilder nicht sichtbar.

Wenn Sie in Chrome und Safari gehen getrennt können Sie den Unterschied sehen ... Bitte helfen Sie, wie dieses Problem zu lösen? `

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<div class="jumbotron"> 
    <div class="container-fluid"> 
      <nav class="row pull-right hidden-xs" style="padding:20px 20px 0 0;"> 
       <ul style="font-size: 15px;"> 
        <li><a href="http://kreationhandlooms.com" alt="Kreation House of Cotton home page">Home</a></li> 
        <li><a href="http://kreationhandlooms.com/aboutus" alt="Kreation House of Cotton about us page">About Us</a></li> 
        <li><a href="http://kreationhandlooms.com/branches" alt="Kreation House of Cotton contact us page">Branches</a></li> 
        <li><a href="http://kreationhandlooms.com/gallery" alt="Kreation House of Cotton gallery page">Gallery</a></li> 
       </ul> 
      </nav> 

      <div class="row-fluid"> 
       <div class="col-sm-7 col-xs-7"> 
        <h1>KREATION <br>House of Cotton</h1> 
        <h2 style="font-weight: bold;padding-bottom: 30px;">Srilankan Quality Handloom Manufacturer</h2> 
        <button class="jumbo-btn hidden-xs" onclick=" 
        location.href='http://kreationhandlooms.com/aboutus';" alt="Kreation House of Cotton about us page">About Us</button> 
       </div> 

       <div class="col-sm-5 col-xs-5"> 

       </div> 
      </div> 
    </div> 
</div> 

CSS

.jumbotron{ 
background-image: url("images/silk saree.jpg"); 
background-size: cover; 
background-position: center 10%; 
background-repeat: no-repeat; 
background-attachment: fixed; 
height: 720px; 
width: 100%; 
font-family: nexabold; 
margin: 0; 
padding: 0; 
} 

@media only screen and (min-width: 510px) and (max-width: 2000px){ 
.jumbotron .container-fluid .row-fluid{ 
padding:160px 0 0 10px; 
} 
} 

@media only screen and (min-width: 100px) and (max-width: 510px){ 
.jumbotron .container-fluid .row-fluid{ 
padding-top: 80px; 
} 
} 

.jumbo-btn{ 
padding:10px 20px; 
border: 3px solid white; 
border-radius: 5px; 
font-size: 18px; 
background:transparent; 
transition: all 0.4s; 
} 

.jumbotron h1{ 
font-weight: bold; 
} 

.jumbo-btn:hover{ 
background-color: grey; 
color: white; 

border:3px solid white; 
} 

@media only screen and (min-width: 200px) and (max-width: 760px){ 
.jumbotron .row-fluid h1{ 
margin:0 0 30px 0; 
font-size: 45px; 
font-weight: bold; 
} 

dort war ein Fehler in der Konsole auch

Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3 

Answer 1

Ihr Konsolenfehler ist aufgrund der Tatsache, dass Sie jQuery in Ihrem HTML nicht laden. Sie brauchen etwas entlang der Linien von hinzuzufügen:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Dies kann auch sein, was Probleme mit Ihren Bildern verursacht. Wenn weiterhin Probleme auftreten, hilft ein funktionierendes Beispiel. Versuchen Sie, eine CodePen oder JSFiddle mit Ihrem Code zu erstellen, und fügen Sie den Link zu Ihrem ursprünglichen Post an.

Edit: Ich habe nur einen Blick auf den Code, und das Bild nicht geladen wird auf Safari Mobile wegen background-attachment: fixed on line 214 von stylesheet.css für die CSS-Klasse .jumbotron. Wenn Sie das aus Ihrem Code entfernen, funktioniert das Bild einwandfrei. Wenn Sie das CSS für den Desktop beibehalten möchten, verwenden Sie einfach eine einfache Medienabfrage, um auf mobile Geräte zu verweisen.