Você e seus usuários querem apps da Web para dispositivos móveis que reajam e rolem suavemente ao toque. O desenvolvimento deles deveria ser fácil, mas, infelizmente, a forma como os navegadores da Web para dispositivos móveis reagem a eventos de toque durante a rolagem é deixada como 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 rolagem suave e manter o controle do desenvolvedor.
Quatro modelos diferentes de processamento de eventos de toque?
As diferenças de comportamento entre os navegadores se dividem 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 o processamento de touchmove seja concluído. Isso é bom porque é mais simples de entender e mais poderoso, mas é ruim para a performance de rolagem, porque significa que cada frame durante a rolagem precisa bloquear a linha de execução principal.
Navegadores: navegador Android (Android 4.0.4, 4.3), Safari para dispositivos móveis (ao rolar a div)
Processamento assíncrono de touchmove
Os eventos touchmove são enviados durante a rolagem, mas a rolagem pode continuar de forma assíncrona (o evento touchmove é ignorado depois que a rolagem começa). Isso pode resultar em "dupla manipulação" de eventos, por exemplo, continuar rolando depois que o site faz algo com o touchmove e chama preventDefault no evento, informando ao navegador para não processá-lo.
Navegadores: Safari para dispositivos móveis (ao rolar o documento) e 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é depois do evento touchend. Nesse modelo, é difícil perceber a diferença entre um toque parado e um rolagem.
Navegadores: Samsung Browser (eventos de movimento do mouse enviados)
Touchcancel no início da rolagem
Não é possível ter os dois, rolagem suave e controle do desenvolvedor. Esse modelo deixa claro o trade-off entre rolagem suave e processamento de eventos, semelhante à semântica da especificação Eventos do ponteiro. Algumas experiências que precisam rastrear o dedo, como a puxar para atualizar, não são possíveis.
Navegadores: Chrome para computador M32 ou mais recente, Chrome para Android
Por que mudar?
Atualmente, o Chrome para Android usa o modelo antigo do Chrome: touchcancel no início da rolagem, o que melhora o desempenho da rolagem, mas causa confusão nos desenvolvedores. Alguns desenvolvedores não conhecem o evento touchcancel ou como lidar com ele, o que causou a interrupção de alguns sites. Mais importante, uma classe inteira de efeitos e comportamentos de rolagem da interface, como puxar para atualizar, barras ocultas e pontos de ajuste, são difíceis ou impossíveis de implementar bem.
Em vez de adicionar recursos codificados em disco especificamente para oferecer suporte a esses efeitos, o Chrome tem como objetivo se concentrar na adição de primitivas de plataforma que permitem aos desenvolvedores implementar esses efeitos diretamente. Consulte A Rational Web Platform para uma exposição geral dessa filosofia.
Novo modelo do Chrome: o modelo de Touchmove assíncrono limitado
O Chrome está introduzindo um novo comportamento
projetado para melhorar a compatibilidade com o código escrito para outros navegadores ao
rolar, além de ativar outros cenários que dependem de eventos touchmove
ao rolar. Esse recurso é ativado por padrão e pode ser desativado
com a flag chrome://flags\#touch-scrolling-mode.
O novo comportamento é o seguinte:
- O primeiro touchmove é enviado simultaneamente para permitir que a rolagem seja cancelada.
- Durante a rolagem ativa
- Os eventos touchmove são enviados de forma assíncrona.
- Limitado a um evento por 200ms ou se uma região de inclinação de 15px do CSS for excedida
- Event.cancelable é falso
- Caso contrário, os eventos touchmove são disparados de forma síncrona, como de costume, quando a rolagem ativa é encerrada ou não é possível porque o limite de rolagem foi atingido.
- Um evento touchend sempre ocorre quando o usuário levanta o dedo
Teste esta demonstração no Chrome para Android e ative a
flag chrome://flags\#touch-scrolling-mode para notar a diferença.
Deixe sua opinião
O modelo de movimento de toque assíncrono tem o potencial de melhorar a compatibilidade entre navegadores e ativar uma nova classe de efeitos de gestos de toque. Queremos saber o que os desenvolvedores pensam e ver o que você pode fazer com ele.