การเปลี่ยนแปลงเกิดขึ้นในการใช้ TouchEvents ของ Chrome ตั้งแต่ M37 (เสถียรใน 08/2014) ซึ่งเป็นการเปลี่ยนแปลงพิกัดที่แสดงในรายงานเป็นแบบลอยแทนจำนวนเต็ม
| ก่อน | หลัง |
|---|---|
|
clientX: 167 clientY: 196 pageX: 167 pageY: 196 Radius X: 26 RadiyY: 26 screenX: 167 screenY: 277 |
clientX: 167.33299255371094 clientY: 195.66700744628906 pageX: 167.33299255371094 pageY: 195.66700744628906 |
ผลจากการเปลี่ยนแปลงนี้หมายความว่าคุณจะตอบสนองต่อท่าทางสัมผัสของผู้ใช้ได้ราบรื่นยิ่งขึ้น เนื่องจากจะทำให้ตำแหน่งของนิ้วมีความแม่นยำสูงขึ้น
เมื่อใช้การสาธิตของ Rick Byers คุณจะเห็น ความแตกต่างที่ยิ่งใหญ่เมื่อวาดการหมุนช้าๆ
โดยจะมีผลกับหน้าจอที่มีความหนาแน่นของพิกเซลมากกว่า 1 เท่านั้น เพื่อทำความเข้าใจสาเหตุ เรามาดูตัวอย่างกัน
สมมติว่าคุณมีตารางกริดแบบ 3x3 พิกเซล CSS และความหนาแน่นของหน้าจอเท่ากับ 3 ซึ่งหมายความว่าเรามีตารางกริดขนาด 9x9 พิกเซลจริงและท่าทางสัมผัสของผู้ใช้จากด้านซ้ายบนไปด้านล่างขวา
เริ่มแรก เราจะปัดเศษตำแหน่งการแตะให้เป็นพิกเซล CSS ที่ใกล้ที่สุด ซึ่งหมายความว่าท่าทางสัมผัสนี้จะทำให้คุณทำตามขั้นตอนต่อไปนี้
เราพลาดการวาดขั้นตอนตรงกลางที่พิกเซลจริงสามารถแสดงเมื่อผู้ใช้ขยับนิ้ว
ตอนนี้เมื่อเราสลับไปเป็นการลอยตัวแล้ว ท่าทางสัมผัสของเราจะมีลักษณะดังนี้
ในกรณีส่วนใหญ่ คุณไม่ต้องเปลี่ยนแปลงโค้ดใดๆ เลย แต่ภาพเคลื่อนไหวหรือการเคลื่อนไหวใดๆ ที่คุณทำเนื่องจาก TouchEvents จะราบรื่นขึ้นโดยเฉพาะสำหรับท่าทางสัมผัสที่ช้า
นอกจากนี้ยังมีแผนที่จะนำการปรับปรุงนี้มาใช้กับ Safari บนอุปกรณ์เคลื่อนที่ด้วยเช่นกัน: https://bugs.webkit.org/show_bug.cgi?id=133180