Une compatibilité et une fluidité accrues

Vous et vos utilisateurs souhaitez des applications Web mobiles qui réagissent et défilent au toucher. Leur développement devrait être facile, mais malheureusement, la manière dont les navigateurs Web mobiles réagissent aux événements tactiles lors du défilement est laissée en tant que détail d'implémentation dans la spécification TouchEvent. Par conséquent, les approches peuvent être divisées approximativement en quatre catégories. Cette situation expose une tension fondamentale entre la fluidité du défilement et le contrôle des développeurs.

Quatre modèles différents de traitement des événements tactiles ?

Les différences de comportement entre les navigateurs se répartissent en quatre modèles.

  1. Traitement synchrone normal des événements

    Les événements de déplacement tactile sont envoyés pendant le défilement, et chaque mise à jour de défilement est bloquée jusqu'à ce que la gestion des mouvements tactiles soit terminée. C'est le plus simple à comprendre, mais c'est aussi le plus efficace. En effet, cela signifie que chaque frame pendant le défilement doit se bloquer sur le thread principal.

    Navigateurs: navigateur Android (Android 4.0.4, 4.3), Safari pour mobile (lors du défilement de l'élément div)

  2. Traitement asynchrone des mouvements tactiles

    Les événements touchmove sont envoyés pendant le défilement, mais ce dernier peut se dérouler de manière asynchrone (l'événement touchmove est ignoré une fois que le défilement a commencé). Cela peut entraîner une "double gestion" des événements, par exemple la poursuite du défilement après que le site Web effectue une action avec touchmove et appelle preventDefault sur l'événement, indiquant au navigateur de ne pas le gérer.

    Navigateurs: Safari pour mobile (lorsque vous faites défiler le document), Firefox

  3. Déplacement tactile désactivé pendant le défilement

    Les événements tactiles ne sont pas envoyés après le début du défilement et ne reprennent qu'après l'événement tactile. Dans ce modèle, il est difficile de faire la différence entre une pression immobile et un défilement.

    Navigateurs: navigateur Samsung (événementsmousemove envoyés)

  4. Appuyer sur "Annuler" au début du défilement

    Vous ne pouvez pas l'utiliser dans les deux sens (fluidité du défilement et contrôle du développeur). Ce modèle fait clairement le compromis entre défilement fluide et gestion des événements, comme c'est le cas avec la sémantique de la spécification des événements de pointeur. Certaines expériences qui peuvent nécessiter de suivre le doigt, telles que le geste Pull pour l'actualisation, ne sont pas possibles.

    Navigateurs: Chrome pour ordinateur version 32 ou ultérieure, Chrome pour Android

Pourquoi changer ?

Chrome pour Android utilise actuellement l'ancien modèle de Chrome: l'annulation tactile au démarrage du défilement, ce qui améliore les performances de défilement, mais prête à confusion pour les développeurs. En particulier, certains développeurs ne sont pas au courant de l'événement "touchcancel", ni de la manière de le gérer, ce qui a entraîné le dysfonctionnement de certains sites Web. Plus important encore, toute une classe d'effets et de comportements de défilement de l'interface utilisateur, telle que tirer pour actualiser, les barres masquées et les points d'ancrage, est difficile ou impossible à implémenter.

Plutôt que d'ajouter des fonctionnalités spécifiquement codées en dur pour prendre en charge ces effets, Chrome vise à se concentrer sur l'ajout de primitives de plate-forme permettant aux développeurs d'implémenter directement ces effets. Pour obtenir une présentation générale de cette philosophie, consultez la page Une plate-forme Web rationnelle.

Le nouveau modèle de Chrome: le modèle Touchmove asynchrone et limité

Chrome introduit un nouveau comportement conçu pour améliorer la compatibilité avec le code écrit pour d'autres navigateurs lors du défilement, et pour permettre d'autres scénarios qui dépendent de l'obtention d'événements tactiles lors du défilement. Cette fonctionnalité est activée par défaut. Vous pouvez la désactiver à l'aide de l'indicateur suivant : chrome://flags\#touch-scrolling-mode.

Le nouveau comportement est le suivant:

  • Le premier mouvement tactile est envoyé de manière synchrone pour permettre l'annulation du défilement.
  • Pendant le défilement actif
    • Les événements touchmove sont envoyés de manière asynchrone
    • throttled à un événement toutes les throttled ou si une pente de throttled CSS est dépassée
    • Event.cancelable est défini sur false.
  • Sinon, les événements touchmove se déclenchent de manière synchrone comme d'habitude lorsque le défilement actif s'arrête ou est impossible parce que la limite de défilement a été atteinte.
  • Un événement tactile se produit toujours lorsque l'utilisateur lève le doigt.

Vous pouvez essayer cette démonstration dans Chrome pour Android et activer/désactiver l'indicateur chrome://flags\#touch-scrolling-mode pour voir la différence.

Donnez-nous votre avis

Le modèle Touchmove asynchrone peut améliorer la compatibilité entre les navigateurs et activer une nouvelle classe d'effets de gestes tactiles. Nous souhaitons connaître l'avis des développeurs et découvrir les possibilités créatives offertes par cette fonctionnalité.