Nuovo bug di posizione fissa su iOS8

Question

Ho un sito con un'intestazione fissa e barre laterali a scorrimento. Con iOS7 in orientamento verticale, l'intestazione fissa rimane fissa quando la barra laterale è visibile, ma su iOS8 l'intestazione spinge leggermente verso l'alto a seconda di quanto in basso si scorre. Ho bisogno che rimanga fisso.

Vai a questa jsbin: http://jsbin.com/xuyevi/2/

I principali pezzi sono un colpo di testa, una barra laterale, e il contenuto essenziale. L'intestazione è fissata nella parte superiore dello schermo utilizzando la posizione fissa e ha uno z-index che lo mantiene sopra il contenuto quando si sta scorrendo.

La barra laterale è fissa sul lato sinistro dello schermo ed è inizialmente nascosta dalla traduzione a sinistra della larghezza.

Per aprire la barra laterale, ciascuna intestazione, contenuto e barre laterali vengono convertite a destra dalla larghezza della barra laterale.

Ancora una volta, questo funziona perfettamente su iOS7 e tutti gli altri browser che supportano translate3d, e funziona anche correttamente in iOS8 quando in orientamento orizzontale. Ma in iOS8 in verticale, l'intestazione fissa scivolerà fuori dallo schermo in base a quanto in basso scorre l'utente.

Inoltre, l'utilizzo di Safari inspector mostra che le voci di menu sullo schermo sono sfalsate rispetto alle posizioni previste. Cioè la selezione di un elemento nell'ispettore evidenzia un'area sullo schermo che è sfalsata rispetto alla posizione effettiva in cui è rappresentata.

Qualcun altro ha incontrato questo? Qualcuno sa una correzione?

MODIFICA: l'ispettore ritiene che l'intestazione di posizione fissa sia esattamente dove dovrebbe essere, anche se in realtà viene spinta fuori dallo schermo.

Answer 1

Stavo cercando di fare qualcosa di simile (vedi here e here) poi ho scoperto che Apple ha pubblicato un technical note che consiglia di evitare il posizionamento fisso. Giuro che ha funzionato bene su iOS 7, ma ora con iOS8 non si "blocca" più.

Questo problema sembra strettamente legato alla impostazione di questa meta-tag:

<meta name="viewport" content="width=device-width"> 

Vedi anche: Fix div to bottom without using css position

Answer 2

ho avuto un problema simile su iOS che utilizzano più elementi posizione fissa e un CSS animati nav off-tela . Su una lunga pagina, la "deriva" verso l'alto era un blocco perché alla fine aumentava fino al punto in cui nascondeva il trigger nav, rendendo impossibile chiudere il menu. Ho provato moltissimo a trovare una soluzione e ho risolto il problema: scorrere di nuovo in alto prima di animare. (#ocnTrigger è il mio off-tela menu Trigger.)

$('#ocnTrigger').click(function(){ 
    $('body').animate({ 
     scrollTop: 0 
    }, 0); 
}); 

Answer 3

Un po 'tardi alla festa, ma aggiungendo

html, body { 
    overflow-x: hidden; 
    overflow-y: scroll; 
} 

fisserà l'offset di scorrimento su elementi fissi che vengono compensati (ad es. A sinistra : 20px) in iOS 8.