Matt Gaunt [X](https://twitter.com/gauntface) [Homepage](https://gauntface.com/blog)

<br />

A [change landed](https://bugs.chromium.org/p/chromium/issues/detail?id=323935) in
the implementation of Chrome's [TouchEvents](https://dvcs.w3.org/hg/webevents/raw-file/v1-errata/touchevents.html#attributes)
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](http://www.rbyers.net/paint.html#points), you can
see what a huge difference this can make when slowly drawing a swirl.
![Differences in Touch Events.](https://developer.chrome.com/static/blog/precision-touch-for-precise-gestures/image/differences-touch-events-001f9d4bbe556.png)

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.](https://developer.chrome.com/static/blog/precision-touch-for-precise-gestures/image/css-pixel-screen-pixel-g-953fe40a860b7.png)

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.](https://developer.chrome.com/static/blog/precision-touch-for-precise-gestures/image/css-pixel-precision-durin-dffc5c8106331.png)

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.](https://developer.chrome.com/static/blog/precision-touch-for-precise-gestures/image/float-precision-during-ge-1efa7a412a2b.png)

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: <https://bugs.webkit.org/show_bug.cgi?id=133180>.