반응형
!!! 문제가 발생한 코드 !!!
상황을 설명하기 위한 코드이며, 실무에 적용한 코드는 아래와 다름.
<body class="overlay">
<div>
...모달을 띄우기 위한 마크업 구조
<div class="modal">
... 모달 컨텐츠 마크업 구조
</div>
</div>
</body>body.overlay {
overflow:hidden;
}
!!! 원인 !!!
- 모바일 safari 브라우저에서 자주 발생하는 이슈이다. (또 safari 가 범인이니?)
- 모바일 safari는 HTML과 body요소를 각각 별개의 뷰포트로 인식하여 스크롤을 처리함
- iOS safari는 전체 화면을 하나의 스크롤 가능한 영역으로 관리함
- touchmove 이벤트가 지속적으로 활성화된 상태에서는 safari가 터치를 계속 시도하며 overflow:hidden 규칙을 우회함
- iOS safari에서는 화면 스크롤을 멈췄을 때 약간 틩기는 바운스 효과가 존재하여 이 스타일을 적용 해도 상단 또는 하단에서 스크롤이 움직이는 것처럼 보여지게 될 수도 있음
- safari에서는 이 스타일을 적용할 때 html요소와 body 요소에 모두 설정해야 정상적으로 작동하는 경우가 있음
!!! 해결 방법 !!!
*아래의 방법은 리서치 했을 때 발견한 방법이며 실무에선 해당 방법을 바탕으로 개발 환경에 적용함.
- 방법1
body.overlay {
position: 'fixed';
overflow: 'hidden';
width: '100%';
}
- 방법2
html.overlay {
overflow-y: hidden;
}- 방법3
body.overlay {
width: 0 !important;
}- 방법4
function preventScroll(e) {
e.preventDefault();
}
document.addEventListener('touchmove', preventScroll, { passive: false });
document.removeEventListener('touchmove', preventScroll);
!!! 내가 선택한 방법 !!!
- 처음에 적용한 방법은 방법3이었으나, 요소의 가로 넓이를 아예 없애는 방식이므로 body의 컨텐츠가 사라지거나 축소되어 레이아웃이 왜곡 될 수 있고, body내부에 position이 absolute인 요소가 존재하거나 정해진 너비와 높이에 의존한다면 UI가 불안정할 수 있으므로 안전하게 방법1으로 정했다.
!!! 느낀점 !!!
- 갑자기 궁금해진 safari 브라우저 이용자수
- 이왕이면 안전한 방법으로 !
반응형