เกิดการเปลี่ยนแปลงจากการใช้งาน TouchEvents ของ Chrome นับตั้งแต่ M37 (คงที่ใน 08/2014) ซึ่งเปลี่ยนค่าพิกัดที่รายงานเป็นเลขทศนิยมแทนจำนวนเต็ม
ก่อน | หลัง |
---|---|
ไคลเอ็นต์X: 167 clientY: 196 หน้า X: 167 หน้า Y: 196 รัศมีX: 26 รัศมีY: 26 screenX: 167 ScreenY: 277 |
clientX: 167.33299255371094 clientY: 195.66700744628906 pageX: 167.33299255371094 pageY: 195.6670074462836:252836:252836:252836:252836:252836:252836: 195.636:252836:252836:252836:252836:252836:252836:252836: |
การเปลี่ยนแปลงนี้หมายความว่าคุณจะตอบสนองต่อท่าทางสัมผัสของผู้ใช้ได้อย่างราบรื่นขึ้นเนื่องจากช่วยให้ตำแหน่งนิ้วมีความแม่นยำมากขึ้น
เมื่อใช้การสาธิตของริค ไบเออร์ คุณจะได้เห็น ความแตกต่างที่ยิ่งใหญ่เมื่อวาดวงกลมช้าๆ

เพราะจะส่งผลต่อหน้าจอที่มีความหนาแน่นของพิกเซลมากกว่า 1 เท่านั้น มาดูตัวอย่างเพื่อทำความเข้าใจกัน
ลองนึกภาพคุณมีตารางกริดขนาด 3x3 ที่มีพิกเซล CSS และความหนาแน่นของหน้าจอเท่ากับ 3 หมายความว่าเรามีพิกเซลจริงขนาด 9x9 และท่าทางสัมผัสของผู้ใช้จากด้านบนซ้ายไปขวาล่าง

เริ่มแรกเราปัดตำแหน่งการแตะให้พิกเซล CSS ที่ใกล้ที่สุด ซึ่งหมายความว่าคุณจะได้ทำตามขั้นตอนต่อไปนี้ในท่าทางสัมผัสนี้

เราพลาดการวาดขั้นตอนระดับกลางที่พิกเซลจริงอาจแสดงเมื่อผู้ใช้เลื่อนนิ้ว
ตอนนี้เราเปลี่ยนเป็นโหมดลอยแล้ว ท่าทางสัมผัสของเราจะมีลักษณะดังนี้

ในกรณีส่วนใหญ่ คุณไม่ต้องทำการเปลี่ยนแปลงใดๆ ในโค้ด แต่จะทำให้ภาพเคลื่อนไหวหรือการเคลื่อนไหวที่เกิดจาก TouchEvents เคลื่อนไหวราบรื่นขึ้น โดยเฉพาะอย่างยิ่งสำหรับท่าทางสัมผัสที่ช้า
นอกจากนี้ เรามีแผนที่จะนําการปรับปรุงนี้มาสู่ Safari บนอุปกรณ์เคลื่อนที่ด้วยเช่นกัน https://bugs.webkit.org/show_bug.cgi?id=133180