Wprowadziliśmy zmianę w implementacji funkcji TouchEvents w Chrome od wersji M37 (wersja stabilna od 08.08.2014 r.), która zmienia zgłaszane współrzędne do liczby zmiennoprzecinkowej 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 pageY: 195.66700744628906 |
Ta zmiana zapewnia płynniejsze reagowanie na gesty użytkowników, ponieważ zwiększa dokładność ułożenia palców.
Dzięki demonstracji Ricka Byersa możesz zobaczyć, jak duża różnica może mieć tym samym efekt powolnego rysowania wiru.
Dotyczy to tylko ekranów o gęstości pikseli większej niż 1. Aby zrozumieć, dlaczego tak jest, przyjrzyjmy się przykładowi.
Załóżmy, że masz siatkę 3 x 3 z pikselami CSS, a gęstość ekranu wynosi 3. Oznacza to, że mamy siatkę pikseli fizycznych 9 x 9 i gesty użytkownika od lewego górnego rogu do prawego dolnego rogu.
Początkowo zaokrąglaliśmy pozycję dotyku do najbliższego piksela CSS, co oznaczało, że w tym geście wykonasz kolejne kroki.
Nie można było narysować żadnych kroków pośrednich, które fizyczne piksele mogły pokazać podczas przesuwania palcem przez użytkownika.
Teraz nasz gest może wyglądać tak:
W większości przypadków nie wymaga to wprowadzania zmian w kodzie, ale oznacza to, że animacje i ruchy generowane po użyciu funkcji TouchEvents będą działały płynniej, zwłaszcza w przypadku powolnych gestów.
Planujemy też wprowadzić to ulepszenie w mobilnej wersji Safari: https://bugs.webkit.org/show_bug.cgi?id=133180.