W wersji M37 (stabilnej z sierpnia 2014 r.) wdrożenia TouchEvents w Chrome wprowadziliśmy zmianę, która polega na przekształceniu raportowanych współrzędnych na liczby zmiennoprzecinkowe zamiast liczb całkowitych.
| Przed | Po |
|---|---|
|
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 |
Dzięki tej zmianie aplikacja będzie płynniej reagować na gesty użytkownika, ponieważ będzie dokładniej wykrywać pozycję palców.
W demo Ricka Byersa możesz zobaczyć, jak wielką różnicę może to zrobić podczas wolnego rysowania zawirowania.
Dotyczy to tylko ekranów o gęstości pikseli większej niż 1. Aby zrozumieć, dlaczego tak się dzieje, rozpatrzmy to na przykładzie.
Wyobraź sobie, że masz siatkę 3 x 3 pikseli CSS, a gęstość ekranu wynosi 3, co oznacza, że masz siatkę 9 x 9 fizycznych pikseli, a gesty użytkownika są wykonywane od lewego górnego rogu do prawego dolnego rogu.
Pierwotnie zaokrąglenia pozycji dotyku były wykonywane do najbliższego piksela CSS, co oznacza, że w przypadku tego gestu musisz wykonać te czynności.
Nie uwzględniamy żadnych pośrednich kroków, które mogłyby być widoczne na fizycznych pikselach podczas przesuwania palca przez użytkownika.
Teraz, gdy używamy liczb zmiennoprzecinkowych, gest może wyglądać tak:
W większości przypadków nie będzie to wymagać żadnych zmian w kodzie, ale animacje i ruchy wywoływane przez TouchEvents będą płynniejsze, zwłaszcza w przypadku powolnych gestów.
Planujemy też wprowadzić tę poprawkę w Safari na urządzenia mobilne: https://bugs.webkit.org/show_bug.cgi?id=133180.