tutorial - Desbordamiento de CSS y problema de posicionamiento absoluto en el navegador de Android

cordova-android npm

Question

Tenemos una aplicación web móvil construida con JQuery Mobile, PhoneGap y ASP.net MVC. La aplicación está diseñada para ejecutarse en dispositivos iOS y Android independientemente de los navegadores. Hemos probado la aplicación en los dispositivos que se enumeran a continuación y parece funcionar bien sin ningún problema.

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

Pero cuando se probó en el navegador Android Stock de Samsung Galaxy Note 800 con 4.1.2, encontramos un problema muy extraño. Los elementos colocados en un div (por ejemplo, child div) con el atributo css '' overflow: auto '' no responden a ningún evento táctil mientras el desplazamiento está habilitado. Lo principal a tener en cuenta aquí es que el div Parent que contiene este div está posicionado absolutamente '' posición: abolir ''. Después de investigar por Internet durante algún tiempo, encontramos que la combinación de la posición absoluta y los atributos de desbordamiento pueden causar algunos problemas en el navegador de Android.

La eliminación de la posición absoluta no es posible en este momento, ya que está dando como resultado un rediseño completo de los diseños y nos quedan solo unos días para el lanzamiento. Entonces, ¿alguien puede sugerir una solución rápida para esto?

Answer 1

¿Qué tal tratar de colocar los elementos dentro del contenedor posicionado absolutamente en un nuevo div y posicionarlo relativamente?

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

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

Answer 2

No sé por qué funcionó, pero agregar -webkit-backface-visibilidad: oculto; a tu estilo lo arreglaré

Answer 3

Problema con el overflow: auto es / era un problema conocido en el navegador de Android. Hubo un problema informado sobre eso en 2009 (ver aquí) . Pensé que lo habían resuelto mientras tanto. Está marcado obsoleto. Pero la gente sigue quejándose de que no funciona. Si es así, sospecho que ya no lo arreglarán, ya que Chrome se ha convertido en un navegador estándar de Android ahora.

Answer 4

Puede utilizar la biblioteca de javascript llamada "iScroll". Funciona con la mayoría de los dispositivos Android y no es difícil de implementar. Simplemente escriba var scrollDiv = new iScroll(''divId''); debajo del elemento div. Aquí está la página del proyecto: http://cubiq.org/iscroll-4

Answer 5

Use las propiedades overflow-x y / o overflow-y en su lugar.

P.EJ

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

Además, como las barras de desplazamiento están ocultas en los dispositivos táctiles, puede usar :scroll lugar de :auto . Se verá igual pero puede que no esté sujeto a los mismos errores.