Problema di overflow CSS e posizionamento assoluto sul browser Android

Question

Abbiamo un'app Web mobile creata con JQuery Mobile, PhoneGap e ASP.net MVC. L'app è progettata per funzionare su dispositivi iOS e Android indipendentemente dai browser. Abbiamo testato l'app sui dispositivi elencati di seguito e sembra funzionare senza problemi

iOS 5 - iPad, iPhone.

Android 4.1.2 - Google Nexus 7, Samsung Galaxy S3, Samsung Galaxy Note 2, Samsung Galaxy Tab 2.

Android 4.0.3 - Asus Transformer Tab

Ma durante il test su Android Stock browser di Samsung Galaxy Note 800 con 4.1.2, abbiamo riscontrato un problema molto strano. Gli elementi collocati in un div (diciamo child div) con l'attributo css 'overflow: auto' non rispondono ad alcun evento touch mentre lo scorrimento è abilitato. La cosa principale da notare qui è che il div principale che contiene questo div è posizionato in modo assoluto 'posizione: abolire'. Dopo aver effettuato ricerche su Internet per un po 'di tempo, abbiamo scoperto che la combinazione di attributi di posizione assoluta e di overflow può causare alcuni problemi nel browser Android.

La rimozione della posizione assoluta non è possibile al momento in quanto si traduce in una riprogettazione completa dei layout e ci rimangono solo pochi giorni per il rilascio. Quindi qualcuno può suggerire una soluzione rapida per questo?

Answer 1

È possibile utilizzare la libreria javascript denominata "iScroll". Funziona con la maggior parte dei dispositivi Android e non è difficile da implementare. Basta scrivere var scrollDiv = new iScroll('divId'); sotto l'elemento div. Qui è la pagina di progetto: http://cubiq.org/iscroll-4

Answer 2

Non so perché ha funzionato, ma aggiungendo -webkit-backface-visibility: hidden; al tuo stile lo risolverà

Answer 3

Il problema con overflow: auto è/era un problema noto nel browser Android. Nel 2009 è stato segnalato un problema nel (see here). Pensavo che l'avessero risolto nel frattempo. È segnato obsoleto. Ma le persone si lamentano ancora che non funziona. Se è così, ho il sospetto che non lo aggiusteranno più, perché ora Chrome è diventato un browser Android standard.

Answer 4

Utilizzare invece le proprietà overflow-x e/o overflow-y.

EG

overflow-y: scroll; /* allow vertical scrolling */ 
-webkit-overflow-scrolling: touch; /* optional momentum scrolling */ 

Inoltre, dal momento che le barre di scorrimento sono nascosti su dispositivi touch è possibile utilizzare :scroll piuttosto che :auto. Sembrerà lo stesso, ma potrebbe non essere soggetto agli stessi bug.

Answer 5

Che ne dici di provare a mettere gli elementi all'interno del contenitore posizionato in modo assoluto in un nuovo div e posizionarlo relativamente?

<div class="absolutelyPositionedParent"> 
    <div class="relativelyPositionedElement"></div> 
</div> 

<style>.relativelyPositionedElement{position:relative;overflow:auto;}</style>