사파리 및 모바일 환경의 크로스 브라우징 이슈와 해결책

크롬 브라우저의 높은 사용률(2023년 6월 기준 62.58%)로 인해 개발 시 간과되기 쉬운 사파리 및 모바일 환경의 크로스 브라우징 이슈를 분석하고 해결책을 제시한다. IE 지원 종료 이후에도 남아있는 브라우저별 동작 차이로 인한 개발 부담을 줄이기 위해 구체적인 코드 예시와 원인 분석을 제공한다.

사파리 브라우저 주요 이슈

스크롤 내부 요소 삭제 시 위치 문제는 스크롤 컨테이너 내 요소가 제거될 때 스크롤 위치가 비정상적으로 이동하는 현상이다. 이는 브라우저 엔진의 차이로 발생하며, 강제로 크롬과 동일한 동작을 하도록 처리해야 한다.

회전 시 Z축 렌더링 오류는 transform: rotate 적용 시 스크롤이 포함된 요소가 독립적인 쌓임 맥락을 가져 다른 요소 위에 겹치는 문제다. 사파리는 스크롤 영역을 별도 레이어로 합성하여 재계산하므로, 가려지는 요소에 transform: translate3d(0,0,0) 또는 will-change: transform을 추가해 독립적인 합성 요소로 지정하면 해결된다.

모바일 환경 주요 이슈

스크롤 관성 중 scrollTop 변경 실패는 iOS에서 스크롤 관성(momentum)이 남아있는 동안 scrollTop 값을 변경하면 관성 종료 후 값이 되돌아오는 현상이다. 해결을 위해 scrollTop 변경 직전에 overflow: hidden을 적용해 관성을 차단한 후 값을 변경하고 다시 overflow: scroll로 복원해야 한다.

touchend 이벤트 시 의도치 않은 클릭 발생은 touchend 시점에 요소를 숨기면, 더블 탭 판별을 위한 딜레이 이후 남아있는 하위 요소에 click 이벤트가 전달되는 문제다. 이는 touchend 대신 click 이벤트를 사용하거나, DOM 변경 시점을 조정하여 방지할 수 있다.