Dépassement CSS et problème de positionnement absolu sur le navigateur Android

Nous avons une application Web mobile créée à l'aide de JQuery Mobile, PhoneGap et ASP.net MVC. L'application est destinée à fonctionner sur des appareils iOS et Android indépendamment des navigateurs. Nous avons testé l'application sur les appareils répertoriés ci-dessous et cela semble fonctionner bien sans problèmes

IOS 5 – iPad, iPhone.

  • Incident du rapport de livraison des messages SMS d'Android
  • Qu'est ce que "BasicDream" dans l'ICS Android?
  • StartForeground causant des problèmes avec cordova
  • Android SQLite: paramètre nullColumnHack dans les méthodes d'insertion / remplacement
  • Comment arrêter le son Le MediaRecorder est lu lorsque l'état change
  • Existe-t-il une solution de rechange pour le bug du navigateur Android avec CSS-Position et les zones cliquables?
  • 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 lorsque testé sur le navigateur Android Stock de Samsung Galaxy Note 800 avec 4.1.2, nous avons rencontré un problème très étrange. Les éléments placés dans un div (say child div) avec css attribut ' overflow: auto ' ne répondent à aucun événement tactile pendant que le défilement est activé. La principale chose à noter ici est que la parent div contenant ce div est absolument positionné ' position: abolute '. Après avoir effectué des recherches sur Internet pendant un certain temps, nous avons constaté que la combinaison de la position absolue et des attributs de débordement peut causer des problèmes sur le navigateur Android.

    La suppression de la position absolue n'est pas possible en ce moment, car elle entraîne une refonte complète des mises en page et nous ne disposons que de quelques jours pour la version. Alors, peut-on proposer une solution rapide pour cela?

  • Quelle est la bibliothèque d'analyse de flux la plus utilisée pour Android?
  • Rendre les fichiers epub dans Android
  • Client RTSP dans Android
  • L'enfant spécifié a déjà un parent. Vous devez appeler removeView () sur le premier parent de l'enfant (Android)
  • Captures d'écran efficaces d'une vue?
  • Proguard warnings "ne peut pas écrire de ressource (Dupliquer l'entrée zip)"
  • 5 Solutions collect form web for “Dépassement CSS et problème de positionnement absolu sur le navigateur Android”

    Utilisez les propriétés overflow-x et / ou overflow-y place.

    PAR EXEMPLE

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

    En outre, comme les barres de défilement sont cachées sur les appareils tactiles, vous pouvez utiliser :scroll plutôt que :auto . Il ressemblera à la même chose mais peut ne pas être soumis aux mêmes bugs.

    Je ne sais pas pourquoi, mais en ajoutant -webkit-backface-visibility: hidden; À votre style va le réparer

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

    Vous pouvez utiliser la bibliothèque javascript appelée «iScroll». Cela fonctionne avec la plupart des appareils Android et n'est pas difficile à mettre en œuvre. var scrollDiv = new iScroll('divId'); simplement var scrollDiv = new iScroll('divId'); Sous l'élément div. Voici la page du projet: http://cubiq.org/iscroll-4

    Que diriez-vous d'essayer de placer les éléments dans le conteneur absolument positionné dans un nouveau div et de le positionner relativement?

     <div class="absolutelyPositionedParent"> <div class="relativelyPositionedElement"></div> </div> <style>.relativelyPositionedElement{position:relative;overflow:auto;}</style> 
    coAndroid est un fan Android de Google, tout sur les téléphones Android, Android Wear, Android Dev et Android Games Apps.