Precision touch for precise gestures

Matt Gaunt

A change landed in the implementation of Chrome's TouchEvents as of M37 (stable in 08/2014), which alters the reported co-ordinates to floats instead of integers.

Before After
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

The result of this change means you have a smoother response to the users gestures as it gives you higher accuracy of the fingers position.

Using Rick Byers' demo, you can see what a huge difference this can make when slowly drawing a swirl.

Differences in Touch Events.

This will only make affect screens which have a pixel density greater than 1. To understand why, let's step through an example.

Imagine you have a 3x3 grid of CSS pixels and the screen density is 3, meaning we have a grid of 9x9 physical pixels and the user gestures from the top left to the bottom right.

CSS Pixel and screen pixel grid.

Originally, we were rounding the touches position to the nearest CSS pixel, which meant in this gesture you would end up with the following steps.

CSS pixel precision during gesture.

We miss out on drawing any of the intermediate steps that the physical pixels could show as the user moves their finger.

Now that we've switched to floats, our gesture can look like this.

Float precision during gesture.

In most cases, this won't require any changes in your code, but does mean any animations or movements you do as a result of TouchEvents, will be smoother, especially for slow gestures.

There is also plan to bring this improvement to mobile Safari as well: