iOS26 Safari Bug — 리퀴드글라스(Liquid Glass)에서 주소창 하단 모달 깨짐 현상 해결하기

October 16, 2025

iOS 26 버전의 **Safari 브라우저(Liquid Glass 환경)**에서는 주소창이 하단(bottom) 에 고정되어 있으며, 자체적인 고유 height 값을 가지고 있다. 이 주소창은 브라우징 버튼과 함께 화면 하단 영역을 차지하며, 그 위로 웹페이지 콘텐츠가 표시된다.

문제: Liquid Glass Bottom Modal 깨짐 버그

이 구조 때문에, 웹페이지에서 모달(modal) 창을 띄울 때 심각한 UI 깨짐 현상이 발생한다. 예를 들어, bottom: 0으로 모달 위치를 잡더라도, 실제로는 Safari 주소창 영역 위쪽까지만 표시되며, 주소창 뒤쪽(하단)은 여전히 웹페이지가 비쳐 보이는 문제가 생긴다.

레딧(Reddit) 등 개발자 커뮤니티에 따르면, 심지어 애플 공식 웹사이트에서도 동일한 버그가 발견된다고 한다.

원인

Safari의 하단 주소창은 iOS 26의 Liquid Glass UI 구조 내에서 브라우저 자체가 렌더링하는 독립된 뷰 영역이다. 따라서, 웹페이지의 CSS 속성(position: fixed;, bottom: 0; 등)으로는 이 영역을 직접 덮거나 투명화할 수 없다. 즉, 이 영역은 DOM 레벨에서 제어할 수 없는 고정된 시스템 영역으로 취급된다.

해결 방법 (Fix for iOS26 Liquid Glass Modal Bug)

현재 가장 간단하고 안정적인 해결책은 다음과 같다.

✅ 해결책: body를 position: fixed로 전환

모달을 띄우는 순간, body 요소의 포지션을 fixed로 바꾸면 Safari의 Liquid Glass 주소창 영역이 불투명(opaque) 으로 바뀐다. 이때 background-color를 지정하면, 그 색상이 Safari 하단 주소창 영역에도 반영된다.

body.modal-open {
  position: fixed;
  width: 100%;
  background-color: #000; /* 불투명 영역 색상 지정 */
}

모달이 닫힐 때에는 body의 position 속성을 원래대로 되돌리는 것을 잊지 말자.

document.body.classList.remove('modal-open');

결론

iOS26 Safari의 Liquid Glass bottom modal bug는 단순한 CSS 위치 조정으로는 해결되지 않는다. 그러나 body의 포지션을 fixed로 전환하는 방식으로 불투명 주소창 영역을 유사하게 통합할 수 있으며, 이를 통해 자연스럽고 전문적인 전체 화면 모달을 구현할 수 있다.

🧩 관련 키워드

• iOS26 Safari bug
• Liquid Glass address modal issue
• Liquid Glass bottom modal fix
• iOS Safari full screen modal
• Safari address bar overlap bug