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 screen38906 |
이렇게 변경하면 손가락 위치의 정확도가 높아지므로 사용자 동작에 더 원활하게 반응할 수 있습니다.
Rick Byers의 데모를 사용하면 천천히 소용돌이를 그릴 때 어떤 차이가 생기는지 확인할 수 있습니다.
픽셀 밀도가 1보다 큰 화면에만 영향을 미칩니다. 이유를 알아보기 위해 예를 들어 보겠습니다.
CSS 픽셀의 3x3 그리드가 있고 화면 밀도가 3이라고 가정해 보겠습니다. 즉, 9x9 실제 픽셀의 그리드와 왼쪽 상단에서 오른쪽 하단으로의 사용자 동작이 있습니다.
원래는 터치 위치를 가장 가까운 CSS 픽셀로 반올림했습니다. 즉, 이 동작에서는 다음과 같은 단계로 끝납니다.
사용자가 손가락을 움직일 때 실제 픽셀이 표시할 수 있는 중간 단계를 그릴 수 없습니다.
이제 부동 소수점 수로 전환했으므로 동작이 다음과 같이 표시될 수 있습니다.
대부분의 경우 코드를 변경할 필요는 없지만 TouchEvents로 인해 실행되는 애니메이션이나 움직임이 더 매끄러워지며, 특히 느린 동작의 경우 더욱 원활해집니다.
이러한 개선사항을 모바일 Safari에도 적용할 계획입니다(https://bugs.webkit.org/show_bug.cgi?id=133180).