自 M37 起 (2014 年 8 月 1 日),Chrome 的 TouchEvents 實作變更已降落,這會將回報的座標改為浮點值,而非整數。
使用前 | 使用後 |
---|---|
clientX:167 clientY:196 pageX: 167 pageY: 196 dpX: 26 半徑: 26 screenX: 167 screenY: 277 |
clientX:167.33299255371094 clientY: 195.66700744628906 pageX: 167.33299255371094 pageY: 195.66700744628606 |
這項變更會造成使用者的手勢回應更順暢,因為可提高手指位置的準確度。
透過 Rick Byers 示範,您可以看到在慢慢繪製漩渦時所產生的巨大差異。

這項設定只會影響像素密度大於 1 的螢幕。為了瞭解原因,以下將舉例說明。
假設你有 3x3 的 CSS 像素網格,且螢幕密度為 3,代表我們的格線大小為 9x9 實體像素,而使用者從左上角到右下角做出手勢。

最初,我們將觸控位置四捨五入至最接近的 CSS 像素,在這個手勢中,最終您會完成下列步驟。

我們未能繪製任何中繼步驟,導致使用者移動手指時,實體像素可能顯示。
我們改為使用浮動式顯示後,手勢看起來會像這樣。

在多數情況下,您不需要在程式碼上進行任何變更,但這也表示您透過 TouchEvents 所做的動畫或動作都能更順暢,尤其是對於緩慢手勢而言。
我們也打算將這項改善措施導入行動版 Safari:https://bugs.webkit.org/show_bug.cgi?id=133180。