Lo sfondo del corpo fisso scorre con la pagina su iOS7

Question

Ho usato il seguente CSS per cetere uno sfondo di corpo fisso. Funziona bene su quasi tutti i browser tranne il nuovo iOS7. Su quest'ultimo lo sfondo non è più fisso. Scorre con la pagina. Qualche idea su come risolvere il problema?

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

ACCLAMAZIONI

Answer 1

cercherò di trovare qualche riferimento, ma i browser Mobile Force background: scroll perché la riverniciatura è troppo costoso.

---

Riferimento:

CSS - Background images not displaying properly on mobile browsers

@PaulIrish notato anche questo:

fisso-sfondi hanno enorme costo ridipingere e decimano scorrimento prestazioni, che è, Credo, perché era disabilitato

ci sono modi per aggirare questo, però .. ma non è una soluzione rapida. Dai un'occhiata alla seguente domanda ed è un commento.

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

Answer 2

ho notato il problema background-attachment l'aggiornamento a iOS7. Ho dovuto risolvere il problema utilizzando Javascript perché non riuscivo a capire una soluzione con il solo CSS.

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

Answer 3

È inoltre possibile utilizzare jquery Backstretch.

non è pesante e funziona bene su iOS 7.

Answer 4

Suggerirei esaminando scrollr (https://github.com/Prinzhorn/skrollr). È una libreria di parallasse che consente di ottenere lo stesso effetto. Essi hanno considerato con attenzione i problemi con i dispositivi mobili anche:

Alcune parole sul perché questo è un traguardo importante e perché altri non è riuscito: i browser mobili cercano di risparmiare la batteria ovunque possibile. Ecco perché i browser per dispositivi mobili ritardano l'esecuzione di JavaScript durante lo scorrimento. In particolare, iOS fa questo in modo molto aggressivo e blocca completamente JavaScript. In breve, questo è il motivo per cui molte librerie a scorrimento o non funzionano su dispositivi mobili o vengono con la propria barra di scorrimento che è un incubo di usabilità sul desktop. Era un requisito importante quando ho sviluppato skrollr che non ti costringo a scorrere nel modo in cui lo voglio. skrollr sul desktop utilizza una barra di scorrimento nativa e puoi scorrere nel modo desiderato (tastiera, mouse, ecc.).

Mi hai appena detto che non funziona su cellulare, ma perché lo fa? La risposta è semplice Quando usi skrollr su dispositivi mobili, in realtà non scorri. Quando rileva un browser mobile, skrollr disabilita lo scorrimento nativo e invece ascolta gli eventi touch e sposta il contenuto (più specifico l'elemento # skrollr-body) utilizzando le trasformazioni CSS.

Ecco un esempio del classico implementazione sfondo parallasse: http://prinzhorn.github.io/skrollr/examples/classic.html

indicati nella pagina di esempio, un altro gioiello degno di nota:

degrada senza JavaScript (potrebbe essere disabilitato sul cellulare senza rompere tutto).

Answer 5

Ho cercato e ho utilizzato le nozioni di base dalla soluzione Prinzhorn su github. Grazie, funziona perfettamente. Ho solo un'immagine di sfondo che è stata mostrata su ogni dispositivo, tranne l'iPad, e ora l'immagine di sfondo-attached = fixed e l'immagine di sfondo-size: cover.

Answer 6

Avevo una soluzione molto semplice per questo, dopo aver lottato con tutti i metodi per risolvere questo problema.

ho avuto il problema sui miei dispositivi IOS mobili.

css (desktop)

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

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

Poi ho sovrascrivere con media query rimuovendo "fisso" come allegato di sfondo.

css (mobile)

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

    background-attachment: initial; 

} 
} 

iniziali - imposta questa proprietà al valore predefinito. Penso che poiché IOS non accetta 'riparato' ricade su un valore predefinito che accetta, scorre.

Questo ha funzionato per me su ogni dispositivo. Spero che aiuti anche qualcun altro.