Se produjo un cambio en la implementación de TouchEvents de Chrome a partir de M37 (estable desde el 08/2014), lo que altera las coordenadas informadas a números de punto flotante en lugar de números enteros.
| Antes | Después |
|---|---|
|
clienteX: 167 clienteY: 196 pageX: 167 páginaY: 196 radioX: 26 radioY: 26 screenX: 167 screenY: 277 |
clientX: 167.33299255371094 clientY: 195.66700744628906 pageX: 167.33299255371094 pageY: 195.66700744628906 |
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 de la posición de los dedos.
Con la demostración de Rick Byers, puedes ver la enorme diferencia que esto puede generar cuando dibujas un espiral lentamente.
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 píxeles físicos de 9 × 9 y el usuario hace un gesto de arriba a la izquierda y viceversa.
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 obtendrían los siguientes pasos.
Se pierde alguno de los pasos intermedios que los píxeles físicos podrían 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 el código, pero significa que las animaciones o los movimientos que realices como resultado de TouchEvents serán más fluidos, especialmente para los gestos lentos.
Además, se planea incorporar esta mejora en Safari para dispositivos móviles: https://bugs.webkit.org/show_bug.cgi?id=133180.