从 M37(已在 2014 年 8 月稳定)开始,Chrome 的 TouchEvents 实现过程发生了一项变更,这会将报告的坐标更改为浮点数,而不是整数。
之前 | 之后 |
---|---|
clientX:167 clientY: 196 pageX: 167 pageY: 196 radiusX:26 radiusY:26 screenX:167 screenY:277 |
clientX: 167.33299255371094 166700744628906 pageX: 167.33299255371094 pageY: 195.66700744628906 166700744628906 |
此项变更的结果意味着,您可以更顺畅地响应用户手势,因为这可以提高手指位置的精确度。
通过 Rick Byers 的演示,您可以了解在缓慢绘制旋涡时这会带来巨大影响。

这只会影响像素密度大于 1 的屏幕。为了了解原因,我们来看一个示例。
假设您有一个 3x3 CSS 像素网格,屏幕密度为 3,这意味着我们有一个 9x9 物理像素的网格,用户从左上方到右下方进行手势。

最初,我们会将轻触位置四舍五入为最接近的 CSS 像素,这意味着在此手势中,您最终将执行以下步骤。

我们会错过绘制物理像素在用户移动手指时显示的任何中间步骤。
现在,我们已切换到浮动模式,我们的手势可能如下所示。

在大多数情况下,这不需要对代码进行任何更改,但意味着您因 TouchEvent 而执行的任何动画或移动都将更流畅,尤其是对于缓慢的手势而言。
我们还计划在移动版 Safari 中也推出这项改进:https://bugs.webkit.org/show_bug.cgi?id=133180。