Tú y los usuarios quieren apps web para dispositivos móviles que reaccionen y se desplacen sin problemas al tacto. Desarrollarlas debería ser fácil, pero, lamentablemente, la forma en que los navegadores web móviles reaccionan a los eventos táctiles durante el desplazamiento es un detalle de implementación en la especificación de TouchEvent. Como resultado, los enfoques se pueden dividir aproximadamente en 4 categorías. Esta situación expone una tensión fundamental entre la fluidez de desplazamiento y el mantenimiento del control del desarrollador.
¿Cuatro modelos diferentes de procesamiento de eventos táctiles?
Las diferencias de comportamiento entre los navegadores se dividen en cuatro modelos.
Procesamiento de eventos síncronos normales
Los eventos de Touchmove se envían durante el desplazamiento, y cada actualización de desplazamiento se bloquea hasta que se complete el control de touchmove. Es bueno como el más fácil de entender y el más potente, pero malo para el rendimiento del desplazamiento, ya que significa que cada fotograma durante el desplazamiento debe bloquearse en el subproceso principal.
Navegadores: Navegador de Android (Android 4.0.4 y 4.3), Mobile Safari (cuando te desplazas por el div)
Procesamiento asíncrono de touchmove
Los eventos de touchmove se envían durante el desplazamiento, pero este puede continuar de forma asincrónica (el evento de touchmove se ignora una vez que se inicia el desplazamiento). Esto puede generar un "control doble" de los eventos; por ejemplo, si se continúa desplazándose después de que el sitio web realice alguna acción con el touchmove, se llame a preventDefault en el evento para indicarle al navegador que no lo controle.
Navegadores: Mobile Safari (cuando se desplaza el documento), Firefox
Se suprime Touchmove durante el desplazamiento
Los eventos de touchmove no se envían después del inicio del desplazamiento y no se reanudan hasta después del evento de touchend. En este modelo, es difícil distinguir entre un toque fijo y un desplazamiento.
Navegadores: navegador Samsung (eventos Mousemove enviados)
Cancelación táctil en el inicio del desplazamiento
No puedes usar ambos sentidos (suavidad de desplazamiento y control del desarrollador), y este modelo aclara el equilibrio entre un desplazamiento suave y la administración de eventos, de manera similar a la semántica de la especificación de Eventos de puntero. Algunas experiencias que pueden necesitar rastrear el dedo, como "deslizar hacia abajo para actualizar", no son posibles.
Navegadores: Chrome Desktop M32 y versiones posteriores, Chrome Android
¿Por qué cambiar?
Actualmente, Chrome para Android usa el modelo anterior de Chrome: touchcancel en el inicio del desplazamiento, lo que mejora el rendimiento del desplazamiento, pero genera confusión para el desarrollador. En particular, algunos desarrolladores no están al tanto del evento touchcancel ni de cómo lidiar con él, y esto provocó fallas en algunos sitios web. Lo que es más importante, es difícil o imposible implementar bien una clase completa de efectos y comportamientos de desplazamiento de la IU, como deslizar hacia abajo para actualizar, barras ocultas y puntos de ajuste.
En lugar de agregar funciones codificadas específicamente para admitir estos efectos, el objetivo de Chrome es concentrarse en agregar primitivas de la plataforma que les permitan a los desarrolladores implementar estos efectos directamente. Consulta Una plataforma web racional para obtener una exposición general de esta filosofía.
El nuevo modelo de Chrome: el modelo de Touchmove regulado y asíncrono
Chrome introduce un nuevo comportamiento diseñado para mejorar la compatibilidad con el código escrito para otros navegadores cuando se desplazan, además de habilitar otras situaciones que dependen de la obtención de eventos touchmove durante el desplazamiento. Esta función está habilitada de forma predeterminada y puedes desactivarla con la siguiente marca, chrome://flags\#touch-scrolling-mode.
El nuevo comportamiento es el siguiente:
- El primer touchmove se envía de forma síncrona para permitir que se cancele el desplazamiento.
- Durante el desplazamiento activo
- Los eventos touchmove se envían de forma asíncrona.
- throttled a 1 evento cada throttled, o si se supera una región de pendiente de throttled de CSS
- Event.cancelable es false
- De lo contrario, los eventos touchmove se activarán de forma síncrona como normal cuando el desplazamiento activo finaliza o no es posible porque se alcanzó el límite de desplazamiento.
- Un evento de cierre de contacto siempre ocurre cuando el usuario levanta el dedo
Puedes probar esta demostración en Chrome para Android y activar o desactivar la marca chrome://flags\#touch-scrolling-mode para ver la diferencia.
Envíanos tu opinión
El modelo Async Touchmove tiene el potencial de mejorar la compatibilidad entre navegadores y habilitar una nueva clase de efectos de gestos táctiles. Nos interesa conocer lo que piensan los desarrolladores y ver las cosas creativas que puedes hacer con ella.