JavaScript DOM cambia en touchmove demorado hasta que el desplazamiento finalice en el dispositivo móvil Safari

Question

En el safari móvil, durante el manejo de touchmove para un elemento, modifico el de ese elemento. Desafortunadamente, el cambio visual no ocurre mientras el usuario está desplazándose, o hasta el final de un desplazamiento inercial.

¿Qué puedo hacer para obtener el className para tomar visualmente de inmediato?

Más: Al parecer esto no se limita a los cambios className, pero aparentemente ningún cambio en el DOM, como innerHTML y style.

Answer 1

Desafortunadamente, esto es por diseño. iOS Safari pondrá en cola toda la manipulación DOM hasta el final de un desplazamiento o gesto. Efectivamente, el DOM está congelado durante un desplazamiento.

Pensé que podría encontrar una referencia a esto en una página de desarrollador de Apple, pero solo puedo encontrar este enlace en jQueryMobile: http://jquerymobile.com/test/docs/api/events.html.

Tenga en cuenta que los dispositivos con iOS congelan la manipulación del DOM durante el desplazamiento, poniéndolos en cola para aplicarlos cuando finaliza el desplazamiento. Actualmente estamos investigando formas de permitir que las manipulaciones DOM se apliquen antes de que se inicie un desplazamiento

Espero que esto ayude!

Answer 2

Realmente construí ese sitio, y sí, la forma de evitar esta limitación es no desplazar el sitio utilizando la funcionalidad incorporada del navegador, sino fingirlo. El JS escucha los eventos de la rueda de desplazamiento y el teclado y ajusta la propiedad css top del contenedor principal a su propia 'scrollTop'. La barra de desplazamiento a la derecha es, por supuesto, una JS personalizada. En este caso, se sincroniza con el mismo valor interno 'scrollTop'.

Todo el sitio es solo una gran interpolación realmente, con la línea de tiempo principal siendo su posición scrollTop, y todas las sub animaciones que se activan en determinados momentos. El JS no está minimizado, así que échale un vistazo al archivo ScrollAnimator.js, está todo allí.

Answer 3

Simplemente cambie la posición a -webkit-sticky. No ajuste la parte superior para que se vea como un elemento normal, pero funciona como un elemento fijo. Y puede actualizar su estilo excepto la posición inmediatamente.