Atraso de 300 ms ao tocar, sumiu

Jake Archibald
Jake Archibald

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.