Por muitos anos, os navegadores para dispositivos móveis aplicaram um atraso de 300 a 350 ms entre touchend e click enquanto esperavam para ver se isso seria um toque duplo ou não, já que o toque duplo era um gesto para aumentar o zoom no texto.
Desde a primeira versão do Chrome para Android, esse atraso era removido quando o zoom por gesto também era desativado. No entanto, o zoom com o gesto de pinça é um recurso de acessibilidade importante. A partir do Chrome 32 (desde 2014), esse atraso não existe mais em sites otimizados para dispositivos móveis sem remover o gesto de pinça. O Firefox e o IE/Edge fizeram a mesma coisa logo depois e, em março de 2016, uma correção semelhante ocorreu no iOS 9.3.
A diferença de desempenho é enorme.
Ter uma IU que responde instantaneamente significa que o usuário pode pressionar rapidamente cada botão com confiança, em vez de pausar e esperar por uma resposta. Saiba mais sobre o impacto dos tempos de reação das pessoas e do desempenho na Web na introdução ao RAIL.
Para remover o atraso por toque de 300 a 350 ms, você só precisa do seguinte no <head> da sua página:
<meta name="viewport" content="width=device-width">
Isso define a largura da janela de visualização da mesma forma que o dispositivo e geralmente é uma prática recomendada para sites otimizados para dispositivos móveis. Com essa tag, os navegadores consideram que você tornou o texto legível em dispositivos móveis, e o recurso de tocar duas vezes para aplicar zoom é descartado para receber cliques mais rápidos.
Se por algum motivo não for possível fazer essa mudança, use touch-action: manipulation para ter o mesmo efeito em toda a página ou em elementos específicos:
html {
touch-action: manipulation;
}
Essa técnica não é compatível com o Safari. Por isso, a tag da janela de visualização é preferível.
Perder o toque duplo para aplicar zoom é uma preocupação de acessibilidade?
Não. O zoom com o gesto de pinça continua funcionando, e os recursos do SO atendem a usuários com dificuldade para fazer esse gesto. No Android, os gestos de ampliação cuidam disso. Ferramentas como essa funcionam até mesmo fora do navegador.
E os navegadores mais antigos?
O FastClick da FT Labs usa eventos de toque para acionar os cliques com mais rapidez e remove o gesto de tocar duas vezes. Ele analisa o quanto o dedo moveu entre touchstart e touchend para diferenciar rolagens e toques.
Adicionar um listener touchstart a tudo tem um impacto no desempenho, porque interações de nível inferior, como rolagem, são atrasadas ao chamar o listener para ver se ele event.preventDefault()s. Felizmente, o FastClick evitará configurar listeners em casos em que o navegador já remova o atraso de 300 ms, para que você obtenha o melhor de ambos.