Você e seus usuários querem aplicativos da Web para dispositivos móveis que reajam e rolem suavemente até a tocar. Desenvolvê-los deve ser fácil, mas, infelizmente, a forma como a Web os navegadores reagem a eventos de toque durante a rolagem é deixado como uma implementação na especificação TouchEvent. Conforme as abordagens podem ser divididas em quatro categorias. Isso situação expõe uma tensão fundamental entre fornecer a suavidade de rolagem e 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 síncrono normal de eventos
Os eventos de touchmove são enviados durante a rolagem, e cada atualização de rolagem é bloqueada até que o manuseio do touchmove seja concluído. Isso é bom por ser o mais simples de entender e mais eficiente, mas não para o desempenho da 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), Mobile Safari (ao rolar div)
Processamento assíncrono de touchmove
Os eventos touchmove são enviados durante a rolagem, mas a rolagem pode prosseguir de forma assíncrona (o evento touchmove é ignorado após o início da rolagem). Isso pode resultar em "tratamento duplo" dos eventos, por exemplo, continuar rolando depois que o site faz algo com o touchmove e chama preventDefault no evento, instruindo o navegador a não manipulá-lo.
Navegadores: Safari para dispositivos móveis (ao rolar o documento), Firefox
Toque no movimento suprimido ao rolar
Os eventos touchmove não são enviados após o início da rolagem e não são retomados até que o evento touchend seja concluído. Nesse modelo, é difícil dizer a diferença entre um toque fixo e uma rolagem.
Navegadores: Samsung Browser (eventos mousemove enviados)
Cancelamento de toque no início da rolagem
Não é possível usar os dois modos (suavidade de rolagem e controle do desenvolvedor), e esse modelo deixa clara a compensação entre rolagem suave e processamento de eventos, semelhante à semântica da especificação Eventos de ponteiro. Algumas experiências que podem precisar acompanhar o dedo, como puxar para atualizar, não são possíveis.
Navegadores: Chrome para computadores M32+, Chrome para Android
Por que mudar?
No momento, o Google Chrome para Android usa o modelo antigo do Google Chrome: cancelamento de toque ao rolar início, o que melhora o desempenho de rolagem, mas causa confusão no desenvolvedor. Mais especificamente, alguns desenvolvedores não estão cientes do evento touchcancel ou como e isso fez com que alguns sites não funcionassem. Mais importante, um toda a classe de efeitos e comportamentos de rolagem da interface, como pull-to-refresh, barras ocultas e pontos de ajuste são difíceis ou impossíveis de implementar muito bem.
Em vez de adicionar recursos fixados no código especificamente para oferecer suporte a esses efeitos, O Chrome tem como objetivo se concentrar em adicionar as bases da plataforma que permitem aos desenvolvedores para implementar esses efeitos diretamente. Consulte Uma plataforma da Web racional (em inglês) uma exposição geral dessa filosofia.
Novo modelo do Chrome: o modelo de movimento de toque assíncrono limitado
O Chrome está apresentando um novo comportamento
projetada para melhorar a compatibilidade com código escrito para outros navegadores ao
rolagem, além de ativar outros cenários que dependem do touchmove
ao rolar a tela. Esse recurso é ativado por padrão, e você pode ativá-lo
off 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 cancelado
- Durante a rolagem ativa
- os eventos touchmove são enviados de forma assíncrona.
- limitado a um evento a cada 200 ms ou se uma região de inclinação de 15px do CSS for excedido
- Event.cancelable é false
- Caso contrário, os eventos touchmove são acionados de maneira síncrona normalmente durante a rolagem ativa é encerrado ou não é possível porque o limite de rolagem foi atingido
- Um evento de touchend sempre ocorre quando o usuário levanta o dedo
Experimente esta demonstração no Google Chrome para Android e ative a
chrome://flags\#touch-scrolling-mode para ver a diferença.
Deixe sua opinião
O modelo Async Touchmove tem o potencial de melhorar a funcionalidade e ativar uma nova classe de efeitos de gestos de toque. Temos interesse em ouvir o que os desenvolvedores pensam e em ver as coisas criativas que você pode fazer a ele.