精密なタッチ操作で正確な操作が可能

M37 以降の Chrome の TouchEvents の実装で変更が行われ(2014 年 8 月安定版)。これにより、報告される座標が整数ではなく浮動小数点数に変更されます。

適用前 適用後
clientX: 167
clientY: 196
pageX:   167
pageY:   196
radiusX: 26
radiusY: 26
screenX: 167
screenY: 277
clientX: 167.33299255371094 167.33299255371094 18 36 56 195.66700744628903






この変更により、指の位置の精度が向上するため、ユーザーの操作に対する応答がより滑らかになります。

Rick Byers のデモを使用すると、ゆっくりと渦巻くときに大きな違いがもたらされることがわかります。

タッチイベントの違い。

これにより、ピクセル密度が 1 を超える画面のみが影響を受けます。理由を理解するために、例を見ていきましょう。

CSS ピクセルの 3x3 グリッドがあり、画面密度が 3(9x9 物理ピクセルのグリッド)で、ユーザーが左上から右下に向かってジェスチャーを行っているとします。

CSS ピクセルと画面のピクセル グリッド。

元々は、タップ位置を最も近い CSS ピクセルに丸めていました。この操作では、次のように処理します。

操作中の CSS ピクセル精度。

ユーザーが指を動かすと物理ピクセルが示す中間ステップを描画する機会を失っています。

浮動小数点数に切り替えたので、操作は次のようになります。

操作中の浮動小数点精度。

ほとんどの場合、コードを変更する必要はありませんが、TouchEvents の結果として実行するアニメーションや動きが滑らかになります(特に操作が遅い場合)。

また、モバイル版 Safari にもこの改善を適用する予定です(https://bugs.webkit.org/show_bug.cgi?id=133180)。