Une modification a été introduite dans l'implémentation des TouchEvents dans Chrome à partir de M37 (stable 08/2014), qui change les coordonnées indiquées en flottants 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 |
Vous bénéficiez ainsi d'une réponse plus fluide aux gestes des utilisateurs, car la position des doigts est plus précise.
Grâce à la démonstration de Rick Byers, vous pouvez voir l'immense différence que cela peut faire si vous dessinez lentement un tourbillon.
Seuls les écrans dont la densité de pixels est supérieure à 1 ne seront affectés. Pour comprendre pourquoi, prenons un exemple.
Imaginez que vous disposez d'une grille de 3 x 3 de pixels CSS et que la densité de l'écran est de 3. Cela signifie que nous avons une grille de 9 x 9 pixels physiques et que l'utilisateur effectue des gestes de haut en bas à gauche vers le bas à droite.
À l'origine, nous arrondissons la position des points de contact au pixel CSS le plus proche. Dans ce geste, vous devez donc obtenir les étapes suivantes.
Nous manquons de trace des étapes intermédiaires que les pixels physiques pourraient afficher lorsque l'utilisateur déplace le doigt.
Maintenant que nous sommes passés aux floats, notre geste peut ressembler à ceci.
Dans la plupart des cas, cela ne nécessite aucune modification de votre code, mais cela signifie que les animations ou les mouvements que vous effectuez à la suite de TouchEvents seront plus fluides, en particulier pour les gestes lents.
Cette amélioration est également prévue dans Safari pour mobile: https://bugs.webkit.org/show_bug.cgi?id=133180.