input per scorrimento jolly android

Question

Sto lavorando su un sito Web reattivo, che ha un foglio di stile diverso per dispositivi mobili o desktop. Tutto sembra bello e funziona alla grande, fino a quando gli input di testo non vengono interagiti con i dispositivi mobili. Si presentano come dovrebbero. Ma una volta cliccato (ehrm .. toccato), ho scoperto che il browser in Android inizia a scorrere come un matto, e lo stesso accade quando si digita. Il testo viene inserito nell'input, tuttavia, e la tastiera/messa a fuoco morbida sull'ingresso non viene persa.

Il mio progetto può essere trovato qui: http://www.gortzfruit.nl/new/

Il problema è che ho cercato una soluzione per un po ', e ho trovato questioni simili le cui soluzioni non funzionavano per me. Alcuni argomenti - e soluzioni - che ho esaminato sono stati:

https://github.com/scottjehl/Device-Bugs/issues/3 -Si suggerisce che il problema si trova all'interno degli elementi posizionati. Particolarmente assoluto all'interno di elementi posizionati in modo fisso. Questo è ricorrente nel mio progetto, ma una volta rimosso non ha risolto il problema.

Android Browser textarea scrolls all over the place, is unusable -Questo suggerisce che il problema è con css-properties -webkit-transform: translate3d (0, 0, 0); e -webkit-backface-visibility: hidden ;. Non li ho inclusi da solo, ma ho pensato che l'API di Google Maps inclusa potrebbe utilizzarli. Ho scoperto che non lo usano neanche, dopo aver analizzato il markup che l'API di Google Maps produce.

How can I prevent wild scrolling when a fixed position text input form field gains focus? -Questo si concentra sul tentativo di far fronte al problema. Impostazione del corpo da traboccare: nascosto; è stato suggerito di bloccare lo scorrimento pur essendo focalizzato, ma non ha funzionato per me.

disable scrolling on input focus in javascript -Qui è suggerito che restituire false su keydown potrebbe risolvere il problema, che ho provato senza successo. Questo impedisce al mio testo di essere effettivamente inserito nell'input.

So che questo è correlato al bug in Android che causa questo strano scorrimento. Ma non so più come affrontare questo. Per me non importa se scopro come evitare il bug o se trovo un trucco per rendere il bug inosservabile. Voglio solo liberarmi dello strano comportamento di scorrimento durante la digitazione e la messa a fuoco/sfocatura delle caselle di testo.

Grazie in anticipo,

Jeroen

Answer 1

Rimuovere il meta tag viewport dal markup e aggiungere questo subito dopo il tag di apertura corpo:

<script type="text/javascript"> 
<!-- 
    (function() { 
     var meta = document.createElement("meta"); 
     meta.setAttribute('name','viewport'); 
     var content = 'initial-scale='; 
     content += 1/window.devicePixelRatio; 
     content += ',user-scalable=no'; 
     meta.setAttribute('content', content); 
     document.getElementsByTagName('head')[0].appendChild(meta); 
    })(); 
//--> 
</script> 

Questo vi darà il meglio esperienza su dispositivi mobili (anche il rendering di immagini straordinarie!). Ho notato sul mio dispositivo (che non è Android) ho avuto alcuni strani problemi di scorrimento/zoom e questo elimina quello. Fammi sapere se funziona :)