Fixed body background scrollt mit der Seite auf iOS7

Question

Ich habe die folgende CSS verwendet, um einen festen Körper Hintergrund zu beenden. Es funktioniert gut auf fast allen Browsern außer dem neuen iOS7. Auf Letzterem ist der Hintergrund nicht mehr festgelegt. Es scrollt mit der Seite. Irgendeine Idee, wie man das Problem beheben kann?

body 
{ 
background-color: #000; 
background-image: url('../pics/backgrounds/blackWhite.jpg'); 
background-repeat: no-repeat; 
background-position: center; 
background-attachment: fixed;  
webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;  
} 

CHEERS

Answer 1

Ich werde versuchen, einen Hinweis zu finden, aber mobiler Browser zwingt background: scroll weil die Neulackierung zu teuer ist.

---

Referenz:

CSS - Background images not displaying properly on mobile browsers

@PaulIrish auch bemerkt dies:

Festhintergründe haben riesige repaint Kosten und dezimieren Performance-Scrolling, das ist, Ich glaube, warum Es war deaktiviert.

Es gibt jedoch Möglichkeiten, aber es ist keine schnelle Lösung. Werfen Sie einen Blick auf die folgende Frage und ihren Kommentar.

Android/Mobile Webkit CSS Background-Attachment:Fixed Not Working?

Answer 2

bemerkte ich das Problem background-attachment wenn auf iOS7 aktualisieren. Ich musste das Problem mit Javascript beheben, da ich keine Lösung mit CSS alleine herausfinden konnte.

if (iosVersion >= 7) { 
    $(document).scroll(function() { 
     $('#background').css('background-position', '0px ' + $(document).scrollTop() + 'px'); 
    }); 
} 

Answer 3

Sie können auch Backstretch jquery verwenden.

Es ist nicht schwer und funktioniert gut auf iOS 7.

Answer 4

Ich würde empfehlen, der in scrollr (https://github.com/Prinzhorn/skrollr). Es ist eine Parallax-Bibliothek, mit der Sie denselben Effekt erzielen können. Sie haben auch Probleme mit mobilen Geräten sorgfältig in Betracht gezogen:

Einige Wörter, warum dies ein wichtiger Meilenstein ist und warum andere fehlgeschlagen: Mobile Browser versuchen, Batterie zu sparen, wo immer sie können. Aus diesem Grund verzögern mobile Browser die Ausführung von JavaScript beim Scrollen. Vor allem iOS macht das sehr aggressiv und stoppt JavaScript komplett. Kurz gesagt, das ist der Grund, warum viele Scroll-Libraries entweder nicht auf mobilen Geräten funktionieren oder sie mit einer eigenen Scrollbar versehen sind, was ein benutzerfreundlicher Albtraum auf dem Desktop ist. Es war eine wichtige Voraussetzung, während ich skrollr entwickelte, dass ich dich nicht dazu zwinge, so zu scrollen, wie ich es möchte. Skollr auf dem Desktop verwendet eine native Bildlaufleiste und Sie können wie gewünscht scrollen (Tastatur, Maus usw.).

Sie sagten mir gerade, es funktioniert nicht auf dem Handy, aber warum funktioniert das? Die Antwort ist einfach. Wenn Sie skrollr auf Mobilgeräten verwenden, scrollen Sie nicht. Beim Erkennen eines mobilen Browsers deaktiviert skrollr das systemeigene Scrollen und überwacht stattdessen Berührungsereignisse und verschiebt den Inhalt (genauer gesagt das # skrollr-body-Element) mithilfe von CSS-Transformationen.Hier

ist ein Beispiel für die klassische Parallaxe Hintergrund Implementierung: http://prinzhorn.github.io/skrollr/examples/classic.html

auf der Beispielseite ausgedrückt, ein anderes Juwel erwähnenswert:

Baut ohne JavaScript (könnte auf Handy deaktiviert werden, ohne dass alles kaputt machen).

Answer 5

Ich habe gesucht und Grundlagen aus der Prinzhorn-Lösung auf GitHub verwendet. Danke, wie es perfekt funktioniert. Ich habe nur ein Hintergrund-Bild, das auf jedem Gerät, außer dem iPad, und jetzt das Bild Hintergrund-angebracht = fest und das Bild Hintergrund-Größe: Abdeckung gezeigt.

Answer 6

Ich hatte eine sehr einfache Lösung dafür, nach dem Kampf mit allen Methoden der Befestigung dieser.

Ich hatte das Problem auf meinen mobilen iOS-Geräten.

css (Desktop)

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap { 
background-size: auto; 
background-attachment: fixed; 
} 

.widget-wrap { 
background-attachment: scroll; 
} 

Dann überschreiben ich es mit Medienabfrage "fixiert" als Hintergrund Befestigung zu entfernen.

css (mobile)

@media (max-width: 767px) { 
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap { 

    background-attachment: initial; 

} 
} 

initial - Legt diese Eigenschaft auf den Standardwert. Ich denke, weil IOS nicht akzeptiert "fixiert" es fällt zurück auf einen Standardwert, den es akzeptiert, blättern.

Das funktionierte für mich auf jedem Gerät. Hoffe, es hilft auch anderen.