Você e seus usuários querem apps da Web para dispositivos móveis que reajam e rolem facilmente ao toque. O desenvolvimento delas será fácil, mas a forma como os navegadores da Web para dispositivos móveis reagem a eventos de toque durante a rolagem é um detalhe de implementação na especificação TouchEvent. Como resultado, as abordagens podem ser divididas em quatro categorias. Essa situação expõe uma tensão fundamental entre oferecer a suavidade de rolagem e manter o controle do desenvolvedor.
Quatro modelos diferentes de processamento de eventos de toque?
As diferenças de comportamento entre os navegadores são divididas em quatro modelos.
Processamento de eventos síncronos normal
Os eventos de touchmove são enviados durante a rolagem e cada atualização de rolagem é bloqueada até que esse processamento seja concluído. Essa opção é boa por ser a mais simples de entender e a mais eficiente, mas ruim para o desempenho de rolagem, porque significa que cada frame durante a rolagem precisa ser bloqueado na linha de execução principal.
Navegadores: navegador Android (Android 4.0.4, 4.3), Mobile Safari (ao rolar div)
Processamento de movimentos de toque assíncronos
Os eventos touchmove são enviados durante a rolagem, mas a rolagem pode prosseguir de maneira assíncrona (o evento touchmove é ignorado depois que a rolagem começa). Isso pode resultar no "gerenciamento duplo" de eventos, por exemplo, continuar rolando depois que o site fizer algo com o touchmove e chamar preventDefault no evento, informando ao navegador que não deve lidar com isso.
Navegadores: Mobile Safari (ao rolar documento), Firefox
Touchmove suprimido durante a rolagem
Os eventos de touchmove não são enviados após o início da rolagem e não são retomados até o evento de touchend. Neste modelo, é difícil dizer a diferença entre um toque fixo e uma rolagem.
Navegadores: navegador Samsung (eventos Mousemove enviados)
Touchcancel no início da rolagem
Não é possível fazer as duas coisas (suavidade da rolagem e controle do desenvolvedor), e esse modelo deixa clara a compensação entre a rolagem suave e o gerenciamento de eventos, semelhante à semântica da especificação Eventos de ponteiro. Algumas experiências que podem precisar rastrear o dedo, como puxar para atualizar, não são possíveis.
Navegadores: Chrome para computador M32+, Chrome Android
Por que mudar?
Atualmente, o Chrome para Android usa o modelo antigo do Chrome: touchcancel ao iniciar a rolagem, que melhora o desempenho da rolagem, mas confunde o desenvolvedor. Em especial, alguns desenvolvedores não estão cientes do evento touchcancel ou de como lidar com ele, e isso causou a falha de alguns sites. Mais importante ainda, toda uma classe de efeitos e comportamentos de rolagem da IU, como arrastar para atualizar, barras ocultas e pontos de ajuste, é difícil ou impossível de implementar bem.
Em vez de adicionar recursos fixados no código especificamente para oferecer suporte a esses efeitos, o Chrome visa se concentrar em adicionar primitivos da plataforma que permitam aos desenvolvedores implementar esses efeitos diretamente. Consulte A Rational Web Platform para ver uma exposição geral dessa filosofia.
Novo modelo do Chrome: o modelo de touchmove assíncrono limitado
O Chrome está apresentando um novo comportamento
projetado para melhorar a compatibilidade com código escrito para outros navegadores durante
a rolagem, além de ativar outros cenários que dependem da detecção de eventos touchmove
durante a rolagem. Esse recurso é ativado por padrão e pode ser desativado
com a seguinte sinalização, chrome://flags\#touch-scrolling-mode.
O novo comportamento é:
- O primeiro touchmove é enviado de maneira síncrona para permitir que a rolagem seja cancelada.
- Durante a rolagem ativa:
- eventos touchmove são enviados de forma assíncrona.
- throttled para 1 evento a cada throttled, ou se uma região de inclinação de throttled de CSS é excedida
- Event.cancelable é false.
- Caso contrário, os eventos touchmove serão disparados de forma síncrona, como normal, quando a rolagem ativa for encerrada ou não for possível porque o limite de rolagem foi atingido
- Um evento de touchend sempre ocorre quando o usuário levanta o dedo
Teste esta demonstração no Chrome para Android e use a sinalização
chrome://flags\#touch-scrolling-mode para ver a diferença.
Deixe sua opinião
O modelo Touchmove assíncrono tem o potencial de melhorar a compatibilidade entre navegadores e ativar uma nova classe de efeitos de gestos de toque. Estamos interessados em saber o que os desenvolvedores acham dos desenvolvedores e em ver as coisas criativas que você pode fazer com ele.