iOS 9 Safari: la modifica di un elemento in posizione fissa durante lo scorrimento non dipinge fino all'interruzione dello scorrimento

Question

Ho sviluppato un sito e ho sfruttato il buon plug-in jQuery Sticky Kit. Funziona passando dalla proprietà position a fixed e viceversa. Funziona molto agevolmente sul desktop e in modo accettabile così nei dispositivi mobili.

O almeno era solito. iOS 9 ha un nuovo comportamento: se lo position di un elemento cambia da static/relative/absolute a fixed mentre l'animazione di scorrimento è in corso, l'elemento diventa invisibile fino a quando lo scorrimento non si ferma. Stranamente, la modifica opposta (da fixed a qualsiasi altra cosa) viene eseguita senza problemi.

Un esempio di lavoro può essere trovato su the plugin's homepage. La barra di navigazione nera ("Esempi di riferimento") dovrebbe essere appiccicosa. Originariamente è static posizionato a metà pagina. Mentre scorri verso il basso diventa fixed e (in iOS 9) scompare fino a quando lo scorrimento si interrompe. Il comportamento nei browser desktop e iOS 8 è corretto.

Avevo un po 'di speranza per i tipici workaround CSS: forzare una trasformazione 3D, disabilitare la visibilità del backface e simili, proprietà proprietarie oscure, ... Ma niente sembra funzionare.

Stiamo già dimenticando gli elementi "attaccabili" ora che funzionava?

Answer 1

Ho avuto questo stesso problema ed è stato in grado di hackerarlo usando il vecchio trucco "forza una trasformazione 3D". Basta impostare l'elemento che si sta per cambiare la posizione di avere una proprietà di trasformazione di translate3d(0px,0px,0px). Assicurarsi che questo sia fatto prima che la proprietà position sia cambiata.

Answer 2

jQuery Sticky Kit e altri plugin simili, pur essendo ben codificati, presentano questo tipo di comportamento su iOS 9, e non è la prima volta che succede qualcosa del genere. Il punto principale qui è che Safari Safari e Safari Mobile supportano lo sperimentale position: sticky;, così Google (Chromium) ma, a causa di problemi di integrazione, ha dovuto disabilitarlo temporaneamente, è possibile leggere ulteriori informazioni su di esso here. Detto questo, credo che molto presto, position: sticky; farà parte delle specifiche CSS e supportato da tutti i principali browser, quindi penso che l'approccio migliore per risolvere questo problema sia utilizzare un polyfill invece di un plugin. Ovviamente, un polyfill non coprirà tutte le funzionalità e funzionalità offerte da questi plugin. Tuttavia, in molte situazioni, l'uso di un polyfill farà il lavoro, come una soluzione solida ed efficace supportata da tutti i principali browser. Secondo me è la strada da percorrere, per ora. Io personalmente uso stickyfill anche se sono sicuro che altri polifibri in natura faranno il trucco. Tutto quello che posso dire è che, da quando ho iniziato a utilizzare un polyfill al posto dei plugin, non ho avuto problemi di compatibilità del browser.

Answer 3

aggiungere questo al vostro elemento fisso
Usando una miscelazione:@include transform(translate3d(0px,0px,0px))
Utilizzando i CSS:translate3d(0px,0px,0px)

Answer 4

ho risolto questo problema con un elemento fisso in più. Dopo alcuni test ho scoperto che è il primo elemento che si risolve a risolvere questo problema. Il 2 °, 3 °, ecc funziona bene su dispositivi iOS.

Quindi, rimettiti subito dopo l'apertura del corpo.fixed-fix:

.fixed-fix { 
    position:fixed; 
    top:-1px; 
    height:1px; 
    width:100%; 
    background:white; 
} 

ora funziona! Il-fix fisso div MUST hanno un colore di sfondo, perché altrimenti non funzionerà ...

Answer 5

L'unica soluzione che ho trovato per funzionare correttamente era la disabilitazione delle traduzioni z-index su figli diretti della voce fissa , ad es .:

.is-sticky > * { 
    -webkit-transform: translateZ(0); 
}