Точное прикосновение для точных жестов

В реализацию Chrome TouchEvents начиная с M37 (стабильная версия с 08/2014) внесено изменение , которое изменяет сообщаемые координаты на числа с плавающей запятой вместо целых чисел.

До После
клиентX: 167
клиент: 196
страницаX: 167
страницаY: 196
радиусX: 26
радиусY: 26
экранX: 167
экранY: 277
клиентX: 167.33299255371094
клиентY: 195.66700744628906
страницаX: 167.33299255371094
страницаY: 195.66700744628906
радиусX: 25.843116760253906
радиусY: 25,843116760253906
экранX: 167.33334350585938
экранY: 276.66668701171875

Результат этого изменения означает, что вы получаете более плавную реакцию на жесты пользователя, поскольку это обеспечивает более высокую точность положения пальцев.

Используя демо Рика Байерса , вы можете увидеть, какую огромную разницу это может иметь, если медленно рисовать завиток.

Различия в сенсорных событиях.

Это повлияет только на экраны с плотностью пикселей больше 1. Чтобы понять почему, давайте рассмотрим пример.

Представьте, что у вас есть сетка CSS-пикселей 3x3 и плотность экрана равна 3. Это означает, что у нас есть сетка из физических пикселей 9x9, и пользователь проводит жестами сверху слева вниз справа.

CSS Pixel и пиксельная сетка экрана.

Первоначально мы округляли позицию касания до ближайшего пикселя CSS, а это означало, что в этом жесте вам придется выполнить следующие шаги.

Точность пикселей CSS во время жеста.

Мы упускаем из виду какие-либо промежуточные этапы, которые могут отображаться физическими пикселями, когда пользователь перемещает палец.

Теперь, когда мы переключились на плавающие объекты, наш жест может выглядеть следующим образом.

Плавающая точность во время жеста.

В большинстве случаев это не потребует каких-либо изменений в вашем коде, но означает, что любая анимация или движения, которые вы выполняете в результате TouchEvents, будут более плавными, особенно для медленных жестов.

Планируется также внести это улучшение в мобильный Safari: https://bugs.webkit.org/show_bug.cgi?id=133180 .