2021. 8. 12. 11:31ㆍ공부내용 공유하기
크로스 브라우징 경험이라는건 정말 말 그대로 '경험'에서 얻게되는 부분인 것 같다.
프로젝트에서 ios 반응속도가 느리다는 이슈가 있었는데, 처음엔 최적화쪽 문제가 있다고 생각해서 이곳저곳 건드려봤다.
그러다가 next.js ios delay , ios safari click event delay 라는 키워드로 구글링해보니 원인과 해결책이 나왔다.
Eliminate 300ms delay on click events in mobile Safari
I've read that mobile Safari has a 300ms delay on click events from the time the link/button is clicked to the time the event fires. The reason for the delay is to wait to see if the user intends to
stackoverflow.com
요약
기본적으로 모바일 사파리에서는 클릭 이벤트 발생 후 실제 이벤트 트리거까지 300ms의 지연이 있다고 한다. 왜?!
그 이유는 사용자의 이벤트가 더블클릭을 통한 스케일 업인지 아니면 그냥 클릭인지를 확인하기 위해서.
(아무리 그래도 300ms는 너무 긴거 아니야...?)
아무튼 UX관점에서 클릭 하나마다 300ms가 지연되는 경험은 웹사이트의 성능에 이슈가 있다고 생각하기 마련이고, 실제로도 사용시 답답함을 느끼게 된다.
해결책은 굉장히 간단한데, 메타태그에서 뷰포트 설정시 스케일 설정을 제거하고, css를 통해 빠른 탭 동작임을 선언할 수 있다.
<meta name="viewport" content="width=device-width, user-scalable=no">html {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
에뮬레이터라 기본적으로 렉이 있긴 하지만 모달을 열고 닫는 부분을 보면, IOS 반응속도가 이전보다 월등히 빨라진 것을 확인할 수 있다.
p.s. -- mov 파일을 gif로 변환하면 속도가 1.5~2배정도 느려지는 것 같다 ㅠㅠ