Background-Attachment: Fixed Funktioniert nicht Auf iOS

Ich versuche eine Lösung zu finden das problem ich habe mit festen Hintergründen auf iOS-Geräten. Ich möchte lieber nicht haben, um alles neu gestalten für diese website, und ich bin der Hoffnung, dass einige CSS-änderungen kann es zu beheben. Diese ist, was die Website sieht aus wie auf iPhones und diese ist, was es Aussehen sollte. Der CSS-code, den ich verwende ist wie folgt:

.container {
    min-width: 320px;
    max-width: 480px;
    margin: 0 auto;
}

.fixed-background {
    height: 800px;
    -webkit-backgound-size: cover;
    -o-backgound-size: cover;
    -moz-backgound-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    overflow: auto;
}

Habe ich auch versucht, mit einer @media Abfrage, um es zu beheben für iOS mit einigen posts auf stackoverflow, aber das hat Sie nicht scheinen, um eine Wirkung:

@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) {
    .fixed-background {
        background-attachment: scroll;
    }
}

HTML

<div class="fixed-background bg-1">
    <div class="container">
        <div class="title">
            <h1>ROOK PROPERTY<br>MANAGEMENT INC.</h1>
            <h2>CONDOMINIUM MANAGEMENT</h2>
        </div>
    </div>
</div>
Haben Sie versucht, dieses stackoverflow.com/questions/23236158/...
Nach einige Diskussionen, ich landete genau mit position: scroll für das mobile-css. Vielen Dank für die Informationen.
Ich denke, das beantwortet deine Frage: stackoverflow.com/questions/24154666/...
Mögliche Duplikate von Fixed Hintergrundbild mit ios7
Wo ist der code für die Klasse .iparaxify?

InformationsquelleAutor Jordan U. | 2017-01-03

  1. -1

    Allen meinen div mit fester hintergrund füge ich die Klassen class="parallax iparaxify paraxify"
    Und in meinem Haupt-css-Datei habe ich: 

    .parallax {
width: 100%;
background url(../images/bg.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

    Machen und schließlich ist es die parallax-für alles, außer, dass ich Produkte 

    .paraxify {
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}

    Am Ende deaktivieren position:fixed für ipad, iphone und ipod mit jquery 

    //adds mobile class, and mobile os to html tag
jQuery(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();

if (deviceAgent.match(/(iphone|ipod|ipad)/)) {
$('.iparaxify').removeClass('paraxify');
}
});

    InformationsquelleAutor Louis Philippe

Schreibe einen Kommentar