M37(2014 年 8 月安定版)以降の Chrome の TouchEvents の実装で変更が行われました。これにより、報告される座標が整数ではなく浮動小数点数に変更されます。
変更前 | 変更後 |
---|---|
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 |
この変更により、指の位置の精度が高くなり、ユーザーの操作に対する反応が滑らかになります。
Rick Byers のデモでは、渦巻きをゆっくりと描画した場合に大きな違いが生まれることがわかります。
こうすると、ピクセル密度が 1 より大きい画面にのみ影響します。その理由を理解するために、例を交えて説明します。
CSS ピクセルの 3x3 グリッドがあり、画面密度が 3 であるとします。つまり、9x9 物理ピクセルのグリッドがあり、ユーザーが左上から右下に向かってジェスチャーを行うとします。
もともとは、タップの位置を最も近い CSS ピクセルに丸めていました。そのため、今回の操作では次の手順を行うことになります。
ユーザーが指を動かすと、物理ピクセルで表示される可能性のある中間ステップが描画されません。
浮動小数点数に切り替えたので、ジェスチャーは次のようになります。
ほとんどの場合、コードを変更する必要はありませんが、TouchEvents の結果として実行するアニメーションや動きが、特に遅いジェスチャーの場合はより滑らかになります。
モバイル版 Safari でもこの改善を行う予定です(https://bugs.webkit.org/show_bug.cgi?id=133180)。