Débordement CSS et problème de positionnement absolu sur le Navigateur Android

nous avons une application web mobile construite en utilisant jQuery Mobile, PhoneGap et ASP.net MVC. L'application est destinée à fonctionner sur les appareils iOS et Android indépendamment des navigateurs. Nous avons testé l'application sur les appareils énumérés ci-dessous et elle semble fonctionner sans problèmes

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

mais lorsqu'il est testé sur navigateur par défaut d'AndroidSamsung Galaxy Note 800 avec 4.1.2, nous avons rencontré un très étrange question. Les éléments placés dans une div (disons div enfant) avec l'attribut css' overflow: auto' ne répondez à aucun événement tactile tant que scroll est activé. La chose principale à noter ici est que le div Parent contenant ce div est absolument positionné' position:abolute'. Après des recherches sur l'internet depuis un certain temps, nous avons constaté que la combinaison de la position absolue et des attributs de débordement peut causer certains problèmes sur Android browser.

la suppression de la position absolue n'est pas possible pour le moment car elle entraîne une refonte complète des mises en page et il ne nous reste que quelques jours pour la publication. Est-ce que quelqu'un peut suggérer une solution rapide pour ça?

17
demandé sur user2630115 2013-07-30 09:12:22

5 réponses

Utiliser overflow-x et/ou overflow-y propriétés à la place.

par exemple

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

aussi, puisque les barres de défilement sont cachées sur les appareils tactiles, vous pouvez utiliser :scroll plutôt que :auto. Il semblera le même mais ne sera peut-être pas sujet aux mêmes bogues.

3
répondu Moob 2014-05-28 10:52:48

je ne sais pas pourquoi cela a fonctionné, mais en ajoutant -webkit-backface-visibility: hidden; à votre style de corriger

1
répondu mistersender 2013-09-27 14:03:05

Problème overflow: auto est/était un problème connu dans le navigateur Android. Un problème a été signalé à ce sujet en 2009 (voir ici). Je pensais qu'ils l'avaient résolu en attendant. Il est marqué comme obsolète. Mais les gens se plaignent encore que cela ne fonctionne pas. Si c'est le cas, je soupçonne qu'ils ne vont pas le corriger plus, comme Chrome est devenu un navigateur Android standard maintenant.

1
répondu smyk 2014-05-22 18:30:50

Vous pouvez utiliser la bibliothèque javascript appelée "iScroll". Il fonctionne avec la plupart des appareils Android et n'est pas difficile à mettre en œuvre. Il suffit d'écrire var scrollDiv = new iScroll('divId'); sous l'élément div. Ici c'est la page du projet: http://cubiq.org/iscroll-4

0
répondu josemmo 2013-07-30 08:58:39

Que Diriez-vous d'essayer de mettre les éléments à l'intérieur du conteneur absolument positionné dans une nouvelle div et de le positionner relativement?

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

<style>.relativelyPositionedElement{position:relative;overflow:auto;}</style>
0
répondu user3725652 2014-06-10 10:50:46