自 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 像素,這表示在這個手勢中,您會執行下列步驟。

我們會錯過繪製任何中間步驟,這些步驟會在使用者移動手指時顯示實體像素。
切換至浮點值後,手勢會變成這樣。

在大多數情況下,您不需要變更程式碼,但這表示您因 TouchEvents 而執行的任何動畫或動作都會更流暢,尤其是緩慢的手勢。
我們也計劃將這項改善功能納入行動版 Safari:https://bugs.webkit.org/show_bug.cgi?id=133180。