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?
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.
je ne sais pas pourquoi cela a fonctionné, mais en ajoutant -webkit-backface-visibility: hidden; à votre style de corriger
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.
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
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>