-webkit-overflow-scrolling 속성과 stacking context 이슈

📌 부드러운 overflow 스크롤을 위한 css 속성

간단한 overflow container 예시

이전부터 HTML 요소에 overflow 가 발생했을 경우

스크롤 형태로 컨텐츠를 보여주기 위해 다음과 같이 CSS 를 정의했습니다.

 

.container {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  flex-wrap: nowrap;
  width: 200px;
}

 

특히 iOS 의 경우 스크롤 바운스 효과를 위해 다음과 같이

스크롤 관련 vendor prefix 를 포함한 CSS 코드를 작성하게 됩니다.

 

-webkit-overflow-scrolling: touch;

 

여기서 touch 로 지정할 경우 모멘텀 기반 스크롤 방식으로 동작하기 때문에

일반적인 모바일 환경과 같이 스크롤 도중 손가락을 화면에서 떼어도 일정시간 스크롤이 지속됩니다.

 

⚠️ Safari 13 부터는 지정할 필요가 없습니다.

Safari 13 릴리즈 노트를 확인해보면 해당 버전부터 overflow: scroll 을 지정할 경우

기본적으로 모멘텀 시크롤이 적용되기 때문에 따로 해당 속성을 정의할 필요가 없어졌습니다.

 

📌 새로운 쌓임 맥락

실제 프로젝트에서 해당 속성을 사용할 때 놓친 부분이 바로 쌓임 맥락 이었습니다.

모바일에서 overflow 시 모멘텀 기반 스크롤을 적용하기 위해 해당 속성을 사용했다가

쌓임 맥락 이슈가 발생했습니다.

 

💡 쌓임 맥락이란?

쌓임 맥락은 가상의 Z축을 기준으로 HTML 요소들을 배치하는 개념입니다.
모든 HTML 요소가 쌓임 맥락을 생성하는 것은 아니며 자신의 속성에 근거해 3차원상의 위치를 정합니다.

 

데스크탑 환경에서는 문제가 없었지만..

모바일 환경에서 -webkit-overflow-scrolling 속성이 적용됨에 따라

새로운 쌓임 문맥이 생성되었고, 이로 인해 기존에 설정된 z-index 값에 의해

popup 이 엉뚱한 곳에 렌더링되는 이슈가 발생했습니다.

 

✅ 쌓임 맥락 이슈 예시

==================================
              page

   ----------------------------
 |          container           |
 |                              |
 |       ----------------       |
 |      |     popup      |      |
 |      |                |      |
 |      |   z-index: 1   |      |
 |      |                |      |
 |       ----------------       |
 |                              |
   ----------------------------

==================================

여기서 container 는 최상위 HTML 요소가 아니라 하위 요소이며

popup 은 최상위 레이어를 덮는 Overlay 요소 위에 깔리는 컴포넌트이기 때문에

페이지 일부영역에만 dimmed 처리되고 해당 영역 위에 팝업이 뜨는 것은 문제가 되었습니다.

 

-webkit-overflow-scrolling 속성이 적용된 container 가 새로운 쌓임 문맥을 생성하고

하위 popup 이 고유의 z-index 설정을 가지고 있었기 때문에 발생한 이슈였고,

이는 popup 을 포함하는 container 컴포넌트의 내부 구조를 변경함으로써 문제를 해결하였습니다.

 

📌 참고자료

Apple Developer Documentation

-webkit-overflow-scrolling - CSS: Cascading Style Sheets | MDN