핵심 요약
카카오엔터테인먼트의 기술 블로그가 Safari 및 모바일 환경에서 발생하는 렌더링 차이를 분석하고, 브라우저 엔진 차이에 따른 문제를 해결한 방법을 제시합니다.
구현 방법
- scrollTop 보정을 위한 크로스브라우저 동기화 로직 도입
- 회전 시 자식 요소가 독립적으로 합성되도록 transform 및 will-change 적용
- navigator.userAgent 의 의존을 줄이고 미디어 쿼리(min-width, orientation 등) 기반 판단으로 처리
주요 결과
- 크로스브라우저에서 스크롤 및 렌더링 예측 가능성 향상
- Safari 특성으로 인한 비의도적 재렌더링 감소
