Une modification est arrivée dans l'implémentation des TouchEvents de Chrome à partir de M37 (stable en 08/2014), qui modifie les coordonnées signalées en valeurs flottantes au lieu d'entiers.
| Avant | Après |
|---|---|
|
clientX: 167 clientY: 196 pageX: 167 pageY: 196 rayonX: 26 rayonY: 26 écranX: 167 écranY: 277 |
clientX: 167.33299255371094 clientY: 195.66700744628906 pageX : 167.33299255371094 pageY : 195.66700744628906 |
Résultat : vous obtenez une réponse plus fluide aux gestes de l'utilisateur, car la position des doigts est plus précise.
À l'aide de la démonstration de Rick Byers, vous pouvez observer l'énorme différence que cela peut avoir pour dessiner lentement un tourbillon.
Cela ne s'appliquera qu'aux écrans dont la densité en pixels est supérieure à 1. Pour comprendre pourquoi, prenons un exemple.
Imaginez que vous ayez une grille de pixels CSS 3x3 et que la densité de l'écran soit de 3, ce qui signifie que nous avons une grille de pixels physiques de 9 x 9, et que les gestes de l'utilisateur s'affichent du coin supérieur gauche vers l'angle inférieur droit.
Au départ, nous arrondissons la position des touches au pixel CSS le plus proche. Vous obtenez donc les étapes suivantes pour ce geste.
Il nous manque l'une des étapes intermédiaires que les pixels physiques pourraient afficher lorsque l'utilisateur déplace son doigt.
Maintenant que nous sommes passés aux floats, notre geste peut ressembler à ceci.
Dans la plupart des cas, cela ne nécessitera aucune modification de votre code, mais cela signifie que les animations ou les mouvements que vous effectuerez à la suite de TouchEvents seront plus fluides, en particulier pour les gestes lents.
Une amélioration est également prévue pour Safari pour mobile: https://bugs.webkit.org/show_bug.cgi?id=133180.