Se implementó un cambio en la implementación de TouchEvents de Chrome a partir de la M37 (estable en agosto de 2014), que altera las coordenadas informadas a números de punto flotante en lugar de números enteros.
| Antes | Despué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 |
El resultado de este cambio es que tienes una respuesta más fluida a los gestos del usuario, ya que te brinda una mayor precisión de la posición de los dedos.
Con la demo de Rick Byers, puedes ver la gran diferencia que puede marcar esto cuando dibujas lentamente un remolino.
Esto solo afectará a las pantallas que tengan una densidad de píxeles superior a 1. Para entender por qué, veamos un ejemplo.
Imagina que tienes una cuadrícula de 3 × 3 de píxeles CSS y la densidad de la pantalla es 3, lo que significa que tenemos una cuadrícula de 9 × 9 de píxeles físicos y los gestos del usuario van de la parte superior izquierda a la parte inferior derecha.
Originalmente, redondeábamos la posición de los toques al píxel de CSS más cercano, lo que significaba que, en este gesto, terminarías con los siguientes pasos.
No dibujamos ninguno de los pasos intermedios que los píxeles físicos podrían mostrar a medida que el usuario mueve el dedo.
Ahora que cambiamos a números de punto flotante, nuestro gesto puede verse de la siguiente manera.
En la mayoría de los casos, esto no requerirá ningún cambio en tu código, pero significa que cualquier animación o movimiento que realices como resultado de TouchEvents será más fluido, especialmente para los gestos lentos.
También se planea implementar esta mejora en Safari para dispositivos móviles: https://bugs.webkit.org/show_bug.cgi?id=133180.