Tú y tus usuarios quieren apps web móviles que reaccionen y se desplacen sin problemas al tocarlos. Desarrollarlos debería ser fácil, pero, lamentablemente, la forma en que los navegadores web para dispositivos móviles reaccionan a los eventos táctiles durante el desplazamiento queda como un detalle de implementación en la especificación de TouchEvent. Como resultado, los enfoques se pueden dividir en 4 categorías. Esta situación expone una tensión fundamental entre ofrecer un desplazamiento fluido y mantener el 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 normal de eventos síncronos
Los eventos de desplazamiento táctil se envían durante el desplazamiento, y cada actualización de desplazamiento se bloquea hasta que se completa el manejo de desplazamiento táctil. Esto es bueno porque es lo más simple de entender y lo más potente, pero es 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), Safari para dispositivos móviles (cuando se desplaza el div)
Procesamiento asíncrono de touchmove
Los eventos de desplazamiento táctil se envían durante el desplazamiento, pero el desplazamiento puede continuar de forma asíncrona (el evento de desplazamiento táctil se ignora después de que comienza el desplazamiento). Esto puede provocar un “control doble” de los eventos, por ejemplo, seguir desplazándose después de que el sitio web haga algo con el evento touchmove y llame a preventDefault en el evento, lo que le indica al navegador que no lo controle.
Navegadores: Safari para dispositivos móviles (cuando se desplaza el documento) y Firefox
Se suprimió el movimiento táctil durante el desplazamiento
Los eventos de desplazamiento táctil no se envían después de que comienza el desplazamiento y no se reanudan hasta después del evento de toque final. En este modelo, es difícil distinguir entre un toque estacionario y un desplazamiento.
Navegadores: Navegador de Samsung (se envían eventos de movimiento del mouse)
Touchcancel on scroll start
No puedes tener ambas cosas: fluidez del desplazamiento y control del desarrollador. Este modelo deja en claro la compensación entre el desplazamiento fluido y el manejo de eventos, similar a la semántica de la especificación de Eventos del puntero. Algunas experiencias que pueden necesitar hacer un seguimiento del dedo, como el gesto de deslizar para actualizar, no son posibles.
Navegadores: Chrome para computadoras de escritorio M32 y versiones posteriores, Chrome para Android
¿Por qué cambiar?
Actualmente, Chrome para Android usa el modelo anterior de Chrome: touchcancel al comienzo del desplazamiento, lo que mejora el rendimiento del desplazamiento, pero genera confusión entre los desarrolladores. En particular, algunos desarrolladores no conocen el evento touchcancel ni cómo controlarlo, lo que provocó que algunos sitios web no funcionen. Lo que es más importante, una clase completa de efectos y comportamientos de desplazamiento de la IU, como deslizar para actualizar, barras ocultas y puntos de ajuste, son difíciles o imposibles de implementar bien.
En lugar de agregar funciones codificadas de forma específica para admitir estos efectos, el objetivo de Chrome es concentrarse en agregar primitivas de plataforma que permitan a los desarrolladores implementar estos efectos directamente. Consulta A Rational Web Platform para obtener una exposición general de esta filosofía.
Nuevo modelo de Chrome: el modelo de Touchmove asíncrono limitado
Chrome presenta un nuevo comportamiento diseñado para mejorar la compatibilidad con el código escrito para otros navegadores durante el desplazamiento, así como para habilitar otras situaciones que dependen de obtener eventos de desplazamiento táctil mientras se desplaza el contenido. 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 primero 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.
- Se limita a 1 evento por 200 ms o si se supera una región de pendiente de 15 px del CSS.
- Event.cancelable es false.
- De lo contrario, los eventos touchmove se activan de forma síncrona como de costumbre cuando finaliza el desplazamiento activo o no es posible porque se alcanzó el límite de desplazamiento.
- Un evento touchend siempre ocurre cuando el usuario levanta el dedo.
Puedes probar esta demo 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 saber qué piensan los desarrolladores y ver las creaciones que pueden hacer con ella.