ingresso IOS concentrata all'interno genitore fisso arresta aggiornamento posizione degli elementi fissi

Question

avviene quanto segue sulla mobile Safari iOS 6.1.2

Procedura per riprodurre

Creare un elemento position: fixed con un elemento interno <input type="text"> .

risultato effettivo

1. ingresso - non focalizzata

   La posizione degli elementi fissi è corretta quando l'ingresso non è a fuoco.

   

2. ingresso - focalizzata

   Quando l'ingresso è a fuoco, il browser entra in una modalità speciale in cui non aggiorna la posizione degli elementi fissi più (qualsiasi elemento posizionato fisso , non solo il genitore dell'input) e sposta l'intera finestra verso il basso in modo da posizionare l'elemento genitore dell'input al centro dello schermo.

   Vedi demo live: http://jsbin.com/oqamad/1/

   

Risultato atteso

La posizione degli elementi fissi è sempre rispettato.

Correzione o soluzione alternativa?

Qualsiasi suggerimento su come forzare Safari a visualizzare correttamente gli elementi fissi sarebbe utile.

Preferirei una soluzione alternativa che non implichi l'utilizzo di position: absolute e l'impostazione di un gestore di eventi onscroll.

Answer 1

Posizione: risolti ha un sacco di bug ben noti, è possibile controllarli qui: Remysharp article. Probabilmente puoi ancora correggerne alcuni utilizzando le risposte di questa domanda: CSS “position: fixed;” into iPad/iPhone?

Buona fortuna!

Answer 2

Sì, si tratta in particolare di un problema di safari iOS dalla v5. Se utilizzi Chrome su iOS, noterai che funzionerà correttamente. Il bodge che uso per sistemare questo è quello di creare e aggiungere un elemento di stile al corpo e successivamente cancellarlo e quindi mettere a fuoco l'elemento.

Non chiedermi perché funziona, troppe ore di tentativi ed errori!

Ho anche notato che, dopo la prima volta che questo è fisso non è necessario eseguire il trucco stile per i successivi elementi posizionati fissi

Answer 3

E 'un bug noto in Safari, sia su iPad e iPhone.

Un modo per cambiare la posizione in assoluto su tutti gli elementi impostati con posizione fissa.

Nel caso in cui si utilizza Modernizr si potrebbe anche colpire i dispositivi mobili in questo modo:

---

codice jQuery

---

$(document).ready(function() { 

    if (Modernizr.touch) { 

     $(document) 

     .on('focus', 'input', function(e) { 
      $('body').addClass('fixfixed'); 
     }) 

     .on('blur', 'input', function(e) { 
      $('body').removeClass('fixfixed'); 
     }); 

     } 

}); 

---

CSS

Se voglio, ad esempio, selezionare solo l'intestazione e il piè di pagina, che sono impostati con posizione fissa, quando la classe 'fixfixed' viene aggiunta al corpo posso cambiare la posizione in assoluto a tutti gli elementi con posizione fissa .

.fixfixed header, .fixfixed footer { 
    position: absolute; 
}