tutorial framework descargar android html css cordova mobile

android - framework - Elementos relativamente posicionados en div desplazables absolutamente posicionados div "lag behind" en scroll



ionic (4)

Tengo una aplicación PhoneGap que muestra un texto bastante largo con encabezados, tablas e imágenes que estoy probando en Android.

Todo funciona bien, excepto los elementos con position:relative estilo position:relative Estos elementos se "retrasan" cuando se desplaza, es decir, si me desplazo por la página, esos elementos comienzan y terminan desplazándose aproximadamente un cuarto de segundo después.

El error ocurre cuando se combina un div absoluto con niños relativos y un niño con overflow:auto . Eliminar cualquiera de esas cosas soluciona el error, pero preferiría dejarlo. Aunque estaría dispuesto a eliminar la tabla y mostrarla por separado (como en un diálogo) si es necesario.

El error solo se presenta en el navegador Android estándar (y por supuesto en mi aplicación PhoneGap). Hasta ahora lo he probado con los siguientes dispositivos:

  • Samsung Galaxy Nexus (4.1.1)
  • Samsung Galaxy S III (4.1.2)

Se agradece cualquier ayuda, pero preferiría una solución donde el HTML y la funcionalidad no se modifiquen (o no demasiado).

Creé un ejemplo mínimo que muestra el error. Simplemente ábrelo en tu Android y comienza a desplazarte, y deberías ver el problema de inmediato:

<!doctype html> <html> <head><meta name="viewport" content="initial-scale=1.0"></head> <body style="margin:0"> <div style="position:absolute;overflow:auto;top:100px;bottom:100px;width:100%"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a quam arcu. Duis ultrices mollis nibh ut hendrerit. Etiam a interdum metus. Integer volutpat, nibh laoreet euismod suscipit, libero sem iaculis lorem, ut hendrerit magna orci eu elit. Nulla eu ultricies libero. Nulla facilisi. Maecenas nec turpis vitae magna lobortis ornare sit amet ut lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vestibulum lobortis orci, sit amet ornare dui congue nec. Morbi id magna at turpis auctor ultricies. Ut rhoncus quam augue, ut consectetur risus.</p> <div style="position:relative;background:red;">relative box<br>moves slower than the other text</div> <p>Fusce congue orci a nunc gravida sed pretium lorem convallis. Etiam hendrerit, ligula eget lobortis vestibulum, arcu sapien pharetra magna, auctor suscipit nisl tellus quis lacus. Cras id elit at ante mollis venenatis. Donec eu sollicitudin odio. Aliquam erat volutpat. Cras et tortor sed mi faucibus sagittis non quis metus. Morbi mauris ante, posuere vel rutrum id, mattis id enim. Morbi purus quam, euismod facilisis blandit quis, commodo at justo. Aliquam in fermentum nibh. Curabitur pharetra blandit risus sit amet tristique. Suspendisse potenti. Curabitur interdum eleifend justo, et dapibus justo volutpat sed.</p> <div style="overflow:auto"> <table> <tr><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th></tr> <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr> </table> </div> </div> </body> </html>

Creo que tienes dos problemas que intentas solucionar. ¿El texto que se desliza hacia abajo y la velocidad de desplazamiento rezagada?

No estoy seguro de qué intenta hacer con el símbolo de copyright, pero no tendría una line-height inferior a 1 o 1em . Intenta usar un elemento padre y modifica el lapso de ese. Probablemente pueda usar display:inline-block; vertical-align: middle; display:inline-block; vertical-align: middle; en el tramo para obtener el efecto deseado.

<p><span>&copy;</span>Some text</p>

Para desplazarse, depende de lo que estés haciendo. Los navegadores móviles esperan 300ms para las etiquetas <a> para ver si está desplazándose o haciendo clic en un enlace. Podría estar relacionado con eso. Si es así, me gustaría pagar en Google FastClick .

Los navegadores móviles aceleran el desplazamiento de la página en el cuerpo. Entonces, usar divs o position:absolute anidados position:absolute podría evitar que obtengas la velocidad de desplazamiento más rápida. En las versiones más recientes de Android e iOS , puede utilizar -webkit-overflow-scrolling: toque para ayudar, pero eso no servirá para teléfonos más antiguos. Intentaría no usar la posición absoluta porque, en función de su ejemplo, no parece que sea necesario, también el uso de divs anidados que se desplazan requiere que algunos usuarios usen dos dedos dentro del div para desplazarse por el contenido. Trataría de evitar eso también y reemplazar el diseño con patrones de diseño más amigables para dispositivos móviles, como un enlace que expande el contenido.

Muchos de los problemas de desplazamiento han salido a la luz al tratar de soportar la position:fixed en el móvil si cree que podría estar causando y le gustaría leer sobre él: http://bradfrostweb.com/blog/mobile/fixed- posición/

Eliminar position:absolute y position:relative , NO son absolutamente necesarios para este diseño y están causando todos sus problemas.

Puede agregar un margin-top a su cuerpo si lo desea.

PhoneGap produce algo de basura html así, espero que tengas un buen control del CSS.

En resumen, los males que estás sufriendo son comunes y documentados. Elementos con overflow:auto o overflow:scroll sufre problemas de pintura / reflujo / procesamiento tanto en el escritorio como en los navegadores móviles. Además, existen problemas en los navegadores móviles (webkit tanto para iOS como para Android) en lo que respecta a no mostrar elementos relativos y absolutos si están "fuera de pantalla". Esto puede provocar un retraso cuando se desplazan por la pantalla.

Hay algunas cuñas "piratas" que puedes aplicar:

element { -webkit-overflow-scrolling: touch; } element > * { -webkit-transform: translateZ(0px); } element > * { -webkit-transform: translate3d(0,0,0); }

Algunos leyendo para ti:

Y un fragmento que copié de alguna parte en mis notas y ahora no puedo encontrar la fuente:

Especialmente en sitios que dependen en gran medida del desplazamiento, es posible que descubra que su contenido principal depende del desbordamiento: desplazamiento. Este es un verdadero desafío, ya que este desplazamiento no es acelerado por GPU de ninguna manera, por lo que el contenido se repinta cada vez que el usuario se desplaza. Puede solucionar estos problemas usando scroll de página normal (overflow: visible) y posición: fixed.

En realidad, hay una solución simple de CSS para él, añadiendo position:relative con sus párrafos, resuelva el problema.

Prueba esto:

<!doctype html> <html> <head><meta name="viewport" content="initial-scale=1.0"> <style> p{ position:relative;} </style> </head> <body style="margin:0"> <div style="position:absolute;overflow:auto;top:100px;bottom:100px;width:100%"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a quam arcu. Duis ultrices mollis nibh ut hendrerit. Etiam a interdum metus. Integer volutpat, nibh laoreet euismod suscipit, libero sem iaculis lorem, ut hendrerit magna orci eu elit. Nulla eu ultricies libero. Nulla facilisi. Maecenas nec turpis vitae magna lobortis ornare sit amet ut lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vestibulum lobortis orci, sit amet ornare dui congue nec. Morbi id magna at turpis auctor ultricies. Ut rhoncus quam augue, ut consectetur risus.</p> <div style="position:relative;background:red;">relative box<br>moves slower than the other text</div> <p>Fusce congue orci a nunc gravida sed pretium lorem convallis. Etiam hendrerit, ligula eget lobortis vestibulum, arcu sapien pharetra magna, auctor suscipit nisl tellus quis lacus. Cras id elit at ante mollis venenatis. Donec eu sollicitudin odio. Aliquam erat volutpat. Cras et tortor sed mi faucibus sagittis non quis metus. Morbi mauris ante, posuere vel rutrum id, mattis id enim. Morbi purus quam, euismod facilisis blandit quis, commodo at justo. Aliquam in fermentum nibh. Curabitur pharetra blandit risus sit amet tristique. Suspendisse potenti. Curabitur interdum eleifend justo, et dapibus justo volutpat sed.</p> <div style="overflow:auto"> <table> <tr><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th> <th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th><th>test</th> <th>test</th><th>test</th><th>test</th><th>test</th><th>test</th></tr> <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td> <td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td> <td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr> </table> </div> </div> </body> </html>