프론트엔드
사파리, 모바일 환경에서의 트러블슈팅
두줄요약
Safari와 iOS에서 발생하는 스크롤, 레이어, 터치 이벤트 차이를 사례별로 분석했습니다. 브라우저 식별보다 실제 동작 조건을 기준으로 보정하는 방법을 제안합니다.
문제 상황
- PC Chrome과 Safari·iOS 환경 간 스크롤 위치, 레이어 배치, 터치 이벤트 처리 차이
- Safari에서 스크롤 내부 요소 삭제 후
scrollTop유지 및 회전 후 절대 위치 요소 은닉 - iOS 관성 스크롤 중 위치 변경 시 렌더링 이상과
touchend뒤 하위 요소 클릭 전파
원인 분석
- WebKit·Blink 등 브라우저 엔진 차이에 따른 스크롤·페인트·합성 레이어 처리 차이
- Safari 스크롤 영역의 독립적 합성과 회전 시 쌓임 맥락 변화
- 터치 환경의 관성 스크롤 및 더블 탭 판별을 위한 지연 클릭 이벤트
해결 방법
- 삭제 전후
scrollHeight차이로scrollTop미갱신 상황 보정 - 회전 대상 내 절대 위치 요소에
translate3d(0,0,0)또는will-change: transform적용 - 관성 중 위치 변경 전
overflow를 잠시 해제하고, DOM 변경이 필요한 터치 처리에는click이벤트 활용
주의할 점
- user agent 기반 브라우저·기기 분기보다 실제 동작 조건 기반 처리
- 특정 기기명 대신 화면 폭·방향 등 미디어 쿼리 특성 활용
- 크로스 브라우징 테스트만으로 포착하기 어려운 복잡한 재현 조건과 렌더링 내부 동작 확인
