Une modification a été apportée à l'implémentation des TouchEvents de Chrome à partir de M37 (version stable en août 2014), qui remplace les coordonnées signalées par des nombres à virgule flottante au lieu d'entiers.
| Avant | Après |
|---|---|
|
clientX: 167 clientY: 196 pageX: 167 pageY: 196 radiusX: 26 radiusY: 26 screenX: 167 screenY: 277 |
clientX: 167.33299255371094 clientY: 195.66700744628906 pageX: 167.33299255371094 pageY: 195.66700744628906 radiusX: 25.843116760253906 radiusY: 25.843116760253906 screenX: 167.33334350585938 screenY: 276.66668701171875 |
Grâce à cette modification, vous obtenez une réponse plus fluide aux gestes des utilisateurs, car la position des doigts est plus précise.
Dans la démo de Rick Byers, vous pouvez voir à quel point cela peut faire toute la différence lorsque vous dessinez lentement un tourbillon.
Cela n'affectera que les écrans dont la densité de pixels est supérieure à 1. Pour comprendre pourquoi, examinons un exemple.
Imaginons que vous disposiez d'une grille de 3 x 3 pixels CSS et que la densité d'écran soit de 3. Cela signifie que nous avons une grille de 9 x 9 pixels physiques et que les gestes de l'utilisateur vont du coin supérieur gauche au coin inférieur droit.
À l'origine, nous arrondions la position des points de contact au pixel CSS le plus proche, ce qui signifiait que, dans ce geste, vous obteniez les étapes suivantes.
Nous ne dessinons aucune des étapes intermédiaires que les pixels physiques pourraient afficher lorsque l'utilisateur bouge son doigt.
Maintenant que nous sommes passés aux flottants, notre geste peut ressembler à ceci :
Dans la plupart des cas, cela ne nécessite aucune modification de votre code, mais cela signifie que toutes les animations ou mouvements que vous effectuez à la suite de TouchEvents seront plus fluides, en particulier pour les gestes lents.
Cette amélioration est également prévue pour Safari sur mobile: https://bugs.webkit.org/show_bug.cgi?id=133180.