从 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 radiusX: 25.843116760253906 radiusY: 25.843116760253906 screenX: 167.33334350585938 screenY: 276.66668701171875 |
这项更改的结果是,您可以更准确地确定手指位置,从而更流畅地响应用户手势。
通过 Rick Byers 的演示,您可以了解在缓慢绘制漩涡时,这会产生多么巨大的影响。

这只会影响像素密度大于 1 的屏幕。为了了解原因,我们来看一个示例。
假设您有一个 3x3 的 CSS 像素网格,且屏幕密度为 3,这意味着我们有一个 9x9 的实际像素网格,并且用户手势从左上角向右下角滑动。

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

我们错过了在用户移动手指时物理像素可以显示的任何中间步骤。
现在,我们已改用浮点数,我们的手势可以如下所示。

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