사파리, 모바일 환경에서의 트러블슈팅
프론트엔드
사파리, 모바일 환경에서의 트러블슈팅
두줄요약
사파리와 iOS에서만 나타나는 스크롤·회전 관련 동작 차이를 사례별로 설명했습니다. 브라우저 감지보다 실제 동작 기준으로 보정하는 접근을 권장했습니다.
핵심 내용
- 사파리와 모바일 환경에서 PC 크롬과 달라 보이는 스크롤·레이아웃 이슈 3가지를 정리
- 브라우저 엔진 차이, 스크롤 관성, 레이어 합성 방식이 원인으로 작용
- userAgent 기반 감지보다 실제 동작 조건을 기준으로 대응하는 방향을 권장
해결 방법
- 스크롤 내부 요소 삭제 후 scrollTop 변화가 없으면 제거된 높이만큼 직접 보정
- 회전 시 가려지는 요소에는 transform: translate3d(0,0,0) 또는 will-change: transform 추가
- 모바일 관성 스크롤 중 scrollTop 변경은 스크롤이 멈춘 뒤 반영하도록 고려