라떼군 이야기
iOS 26 Safari 스크롤 시 fixed/sticky 요소 위치 어긋남 현상 분석 및 해결
Problem
iOS 26 버전의 Safari 브라우저에서 웹 페이지를 스크롤할 때 심각한 레이아웃 버그가 발생하고 있습니다. 사용자가 스크롤을 내려 브라우저 하단의 주소 표시줄(Address Bar)이 축소될 때, position: fixed 또는 position: sticky 속성을 가진 요소들이 뷰포트 하단에 고정되지 않고 수직으로 밀려나거나 하단에 원치 않는 여백이 생기는 현상입니다. 특히 하단에 고정된 푸터(Footer)나 내비게이션 바를 구현할 때 치명적이며, 일반적인 CSS 속성 조절로는 해결되지 않아 많은 개발자들을 당혹스럽게 하고 있습니다.
Background
이 문제는 모바일 브라우저의 동적 뷰포트(Dynamic Viewport) 처리 방식과 관련이 있습니다. 모바일 Safari는 스크롤 방향에 따라 상단/하단 툴바의 크기가 변하며, 이에 따라 실제 콘텐츠가 표시되는 영역(Viewport)의 높이가 달라집니다. 일반적으로 브라우저는 이 변화에 맞춰 fixed 요소의 위치를 재계산(Reflow/Repaint)해야 합니다. 하지만 이번 iOS 26 릴리스의 WebKit 엔진에는 뷰포트 크기 변경 시 좌표 계산이 동기화되지 않거나 지연되는 회귀 버그(Regression Bug)가 존재하는 것으로 파악됩니다.
Solution
이 문제는 근본적으로 브라우저 엔진의 버그이지만, 상황에 따라 대처할 수 있는 방법은 크게 두 가지로 나뉩니다.
1. 브라우저 업데이트 대기 (권장)
가장 확실하고 부작용 없는 해결책은 브라우저 패치를 기다리는 것입니다. 현재 보고된 바에 따르면, 이 문제는 iOS 26.1 Beta 버전에서 이미 수정되었습니다.
- 원인: WebKit 엔진 내부의 레이아웃 계산 오류
- 해결: iOS 26.1 정식 릴리스 시 자동 해결됨
- 권장 사항: 서비스에 치명적이지 않다면, 무리한 CSS 핵(Hack)을 적용하기보다 사용자에게 OS 업데이트를 권장하거나 패치를 기다리는 것이 좋습니다.
2. CSS Overflow 속성을 이용한 임시 우회 (Workaround)
서비스 운영상 즉각적인 조치가 필요하다면, 스크롤 컨테이너를 body로 강제 이동시키는 방법을 사용할 수 있습니다. 하지만 이 방법은 **부작용(Side Effects)**이 있으므로 주의해서 적용해야 합니다.
/* CSS 적용 예시 */
html {
/* html 요소의 스크롤을 막습니다 */
overflow: hidden;
}
body {
/* body 요소에서 스크롤이 발생하도록 변경합니다 */
overflow: auto;
/* 전체 화면 높이를 확보합니다 */
height: 100%;
}
이 방법의 장점:
fixed요소가 스크롤 시 튀는 현상을 막아줍니다.
이 방법의 단점 (주의사항):
- 스크롤 위치 기억 불가: 뒤로 가기 등으로 페이지에 다시 돌아왔을 때 스크롤 위치가 유지되지 않을 수 있습니다.
- 프로그래밍적 스크롤 불가:
window.scrollTo()같은 메서드가html이 아닌body를 기준으로 동작해야 하므로 기존 코드가 깨질 수 있습니다. - Safari UI 경험 저하: 스크롤 시 주소 표시줄이 부드럽게 줄어드는 네이티브 기능이 비활성화될 수 있습니다.
3. 최신 Viewport 단위 점검 (참고)
버그와 별개로, 모바일에서 하단 고정 요소를 다룰 때는 vh 대신 dvh (Dynamic Viewport Height) 사용을 고려해야 합니다.
.footer {
position: fixed;
bottom: 0;
width: 100%;
/* 구형 브라우저를 위한 폴백 */
height: 10vh;
/* 동적 뷰포트 높이 반영 */
height: 10dvh;
}
Deep Dive
추가적으로 발생하는 이슈들
단순히 위치가 어긋나는 것 외에도 iOS 26 WebKit에서는 다음과 같은 연관 버그들이 보고되고 있습니다:
- 입력창 충돌:
input이나textarea에 포커스가 가서 가상 키보드가 올라올 때,fixed요소들이 화면에서 사라지거나 엉뚱한 위치로 튀는 현상이 심화됩니다. - 사이드 메뉴 잘림: 고정된 사이드바(Side Navbar)가 주소 표시줄 라인에서 잘리는 렌더링 오류가 발생합니다.
- 투명도 버그: 반투명(Translucent) 배경이 스크롤 시 갑자기 불투명(Solid)하게 변하는 렌더링 결함이 있습니다.
이러한 문제들은 CSS만으로는 완벽히 제어하기 어려우므로, 복잡한 레이아웃 변경보다는 기능적인 단순함을 유지하며 브라우저 패치를 기다리는 것이 장기적인 유지보수 관점에서 유리합니다.
Conclusion
iOS 26 Safari에서 발생하는 fixed 요소 위치 버그는 개발자의 코드가 아닌 브라우저 엔진(WebKit)의 결함입니다. overflow 속성을 변경하여 임시로 해결할 수 있으나 스크롤 경험을 해칠 수 있습니다. 다행히 iOS 26.1 베타에서 해당 문제가 수정되었으므로, 무리한 코드 수정보다는 이슈를 인지하고 업데이트를 기다리는 것이 가장 현명한 대처일 수 있습니다.