Por muitos anos, os navegadores de dispositivos móveis aplicavam 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 tocar duas vezes era um gesto para aumentar o zoom do texto.
Desde o lançamento do Chrome para Android, esse atraso foi removido quando o zoom com gesto de pinça também estava desativado. No entanto, o gesto de pinça é um recurso de acessibilidade importante. Desde o Chrome 32 (em 2014), esse atraso desaparece dos sites otimizados para dispositivos móveis, sem remover o zoom com gesto de pinça. O Firefox e o IE/Edge fizeram o mesmo pouco depois. Em março de 2016, uma correção semelhante chegou ao iOS 9.3.
A diferença de desempenho é enorme.
Com uma interface que responde instantaneamente, o usuário pode pressionar cada botão rapidamente, com confiança, em vez de pausar e esperar por uma resposta. Saiba mais sobre o impacto dos tempos de reação humana e do desempenho da Web na introdução ao RAIL.
Para remover o atraso ao toque de 300 a 350 ms, você só precisa fazer o seguinte no <head> da sua página:
<meta name="viewport" content="width=device-width">
Isso define a largura da janela de visualização como a mesma do dispositivo e, em geral, é uma prática recomendada em sites otimizados para dispositivos móveis. Com essa tag, os navegadores presumem que você deixou o texto legível no celular, e o recurso de tocar duas vezes para ampliar é descartado em favor de cliques mais rápidos.
Se por algum motivo não for possível fazer essa mudança, use touch-action: manipulation para conseguir 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, é preferível usar a tag da janela de visualização.
A perda do toque duplo para aplicar zoom é um problema de acessibilidade?
Não. O zoom por gesto de pinça continua funcionando, e os recursos do SO atendem aos usuários que acham difícil 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 by FT Labs usa eventos de toque para acionar cliques com mais rapidez e remove o gesto de tocar duas vezes. Ele analisa a quantidade de movimento do dedo entre touchstart e touchend para diferenciar rolagens e toques.
Adicionar um listener touchstart a tudo causa impacto no desempenho, porque interações de nível mais baixo, como rolagem, são atrasadas ao chamar o listener para ver se ele event.preventDefault()s. Felizmente, o FastClick evita a configuração de listeners nos casos em que o navegador já remove o atraso de 300 ms, para que você tenha o melhor de ambos.