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 radiusX: 25.843116760253906 radiusY: 25.843116760253906 screenX: 167.33334350585938 screenY: 276.66668701171875 |
이 변경사항의 결과로 손가락 위치의 정확성이 높아져 사용자 동작에 더 원활하게 반응할 수 있습니다.
릭 바이어스 데모를 사용하면 소용돌이를 천천히 그릴 때 얼마나 큰 차이가 있는지 확인할 수 있습니다.
이는 픽셀 밀도가 1보다 큰 화면에만 영향을 미칩니다. 이유를 이해하려면 예를 살펴보겠습니다.
CSS 픽셀로 된 3x3 그리드가 있고 화면 밀도가 3이라고 가정해 보겠습니다. 즉, 9x9 실제 픽셀 그리드가 있고 사용자 동작이 왼쪽 상단에서 오른쪽 하단으로 이루어집니다.
원래는 터치 위치를 가장 가까운 CSS 픽셀로 반올림했습니다. 즉, 이 동작에서는 다음 단계가 실행됩니다.
사용자가 손가락을 움직일 때 실제 픽셀이 표시할 수 있는 중간 단계를 그리지 못합니다.
이제 부동 소수점 수로 전환했으므로 동작이 다음과 같이 표시될 수 있습니다.
대부분의 경우 코드를 변경할 필요는 없지만 TouchEvents의 결과로 실행되는 애니메이션이나 움직임이 특히 느린 동작의 경우 더 부드럽게 실행됩니다.
모바일 Safari에도 이 개선사항을 적용할 계획입니다(https://bugs.webkit.org/show_bug.cgi?id=133180).