Retraso de presión de 300 ms que desapareció

Jake Archibald
Jake Archibald

Durante muchos años, los navegadores para dispositivos móviles aplicaron un retraso de 300 a 350 ms entre el touchend y el click mientras esperaban ver si iba a ser presionar dos veces o no, ya que presionar dos veces era un gesto para acercar el texto.

Desde la primera versión de Chrome para Android, esta demora se eliminaba si también se inhabilitaba el zoom para pellizcar. Sin embargo, el zoom de pellizcar es una función de accesibilidad importante. A partir de Chrome 32 (en 2014), esta demora en los sitios optimizados para dispositivos móviles, sin quitar el zoom de pellizcar. Firefox e IE/Edge hicieron lo mismo poco después y, en marzo de 2016, una corrección similar llegó a iOS 9.3.

La diferencia en el rendimiento es enorme.

Tener una IU que responda al instante significa que el usuario puede presionar rápidamente cada botón con confianza, en lugar de detener y esperar una respuesta. Obtén más información sobre el impacto de los tiempos de reacción humana y el rendimiento web en nuestra introducción a RAIL.

Para quitar la demora de presión de 300 a 350 ms, solo necesitas lo siguiente en el <head> de tu página:

<meta name="viewport" content="width=device-width">

Esto establece el ancho del viewport para el mismo que el del dispositivo y, por lo general, es una práctica recomendada en el caso de los sitios optimizados para dispositivos móviles. Con esta etiqueta, los navegadores asumen que hiciste que el texto sea legible en dispositivos móviles, por lo que se quitará la función de presionar dos veces para acercar y priorizar los clics más rápidos.

Si por alguna razón no puedes realizar este cambio, puedes usar touch-action: manipulation para lograr el mismo efecto en toda la página o en elementos particulares:

html {
    touch-action: manipulation;
}

Esta técnica no se admite en Safari, por lo que se prefiere la etiqueta de viewport.

¿Perder la función de presionar dos veces para acercar es un problema de accesibilidad?

No. El zoom de pellizcar sigue funcionando, y las funciones del SO son útiles para los usuarios a quienes les resulta difícil realizar este gesto. En Android, se encargan de los gestos de ampliación. Este tipo de herramientas incluso funcionan fuera del navegador.

¿Qué ocurre con los navegadores más antiguos?

FastClick by FT Labs usa eventos táctiles para activar clics más rápido y quita el gesto de presionar dos veces. Observa cuánto se movió el dedo entre touchstart y touchend para diferenciar los desplazamientos y las presiones.

Agregar un objeto de escucha touchstart a todo tiene un impacto en el rendimiento, ya que las interacciones de nivel inferior, como el desplazamiento, se retrasan cuando se llama al objeto de escucha para ver si event.preventDefault(). Afortunadamente, FastClick evitará configurar objetos de escucha en casos en los que el navegador ya elimine la demora de 300 ms, para que obtengas lo mejor de ambos.