Se realizó un cambio en la implementación de TouchEvents de Chrome a partir de M37 (estabilidad a partir de 08/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 RadioX: 26 RadioY: 26 screenX: 167 screenY: 277 |
clienteX: 167.33299255371094 clienteY: 195.66700744628906 pageX: 167.33299255371094 |
El resultado de este cambio significa que tienes una respuesta más fluida a los gestos de los usuarios, ya que te brinda una mayor precisión en la posición de los dedos.
Con la demostración de Rick Byers, puedes ver la gran diferencia que puede hacer cuando dibujas lentamente un remolino.
Esta acción solo afectará a las pantallas que tengan una densidad de píxeles superior a 1. Para comprender 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 píxeles físicos de 9 × 9 y el usuario hace un gesto desde la parte superior izquierda hasta 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, se completarían los siguientes pasos.
No es posible dibujar ninguno de los pasos intermedios que los píxeles físicos pueden mostrar cuando el usuario mueve el dedo.
Ahora que cambiamos a los números de punto flotante, nuestro gesto puede verse así.
En la mayoría de los casos, esto no requerirá ningún cambio en tu código, pero significa que las animaciones o movimientos que realices como resultado de TouchEvents serán más fluidos, en especial para los gestos lentos.
También planeamos implementar esta mejora en Safari para dispositivos móviles: https://bugs.webkit.org/show_bug.cgi?id=133180.