自 M37 起,在 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。