Background-Attachment: Fixed funktioniert nicht auf iOS

Ich versuche eine Lösung für das Problem zu finden, das ich mit festen Hintergründen auf iOS-Geräten habe. Ich möchte nicht alles für diese Website neu entwerfen, und ich hoffe, dass einige CSS-Änderungen es beheben können. This ist, wie die Website auf iPhones aussieht, und this ist, wie es aussehen soll. Der CSS-Code Ich verwende ist wie folgt:Background-Attachment: Fixed funktioniert nicht auf iOS

.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; 
}

ich auch mit @media Abfrage versucht haben, es zu beheben für iOS einige Beiträge auf Stackoverflow verwenden, aber dies keine Wirkung zu haben schien:

@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>

Quelle

2017-01-03 Jordan U.

Haben Sie versucht, diese http://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios – Shashi

Nach einiger Debatte endete ich nur mit Position: Scroll für das Handy css. Danke für die Information. –

Ich denke, das beantwortet Ihre Frage: http://StackOverflow.com/Questions/24154666/Background-Bild-Size-Cover-Not-Working-On-ios/43058483#43058483 –

ich ging gerade durch das gleiche Problem, und das ist, wie ich es gelöst.

Zuerst müssen Sie Ihren Körper und html erklären, zu 100% breit und 100% hoch: das Scrollen auf Ihrer Seite

html, body{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
}

Dann kann nicht durch die getan werden body: Sie müssen es auf einen Container wickeln. Dieser Container benötigt drei Parameter: Überlauf: Scroll, Breite: 100% und Höhe: 100%. Ich empfehle, die gesamte Seite in dem Einwickeln:

#wrapper{ 
 
\t \t width: 100%; 
 
\t \t height: 100%; 
 
\t \t overflow: scroll; 
 
\t }

Wenn Sie möchten nicht, wie es rollt, können Sie auch versuchen, -webkit-Überlauf-Scrolling-Zugabe: touch.

Hoffe das hilft Ihnen/wer immer auf der Suche danach!

Quelle

2017-07-18 06:42:23

-1

Um all meine div mit festen Hintergrund füge ich die Klassen class="parallax iparaxify paraxify" Und in meiner Haupt-CSS-Datei Ich habe:

.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; 
}

Und schließlich es für alles machen Parallaxe außer i Produkten

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

Am Ende deaktivieren Sie 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'); 
} 
});

Quelle

2017-10-12 00:41:04

Background-Attachment: Fixed funktioniert nicht auf iOS

Antwort

Verwandte Themen