iOS에서 -webkit-overflow-scrolling: touch는 더이상 필요 없다

2023년 10월 9일

iOS 기기에서 웹 페이지 내 스크롤 컴포넌트에(예컨대 overflow: scroll 속성을 적용한 컨테이너) 부드러운 스크롤을 적용하려면 -webkit-overflow-scrolling: touch;라고 CSS를 적용해야 했습니다.

그러나 2019년 9월 출시된 iOS 13, iPasOS 13부터는 이게 필요 없어졌습니다. 기본적으로 부드러운 스크롤이 적용됐기 때문입니다_{(애플은 이를 가속 스크롤이라고 부릅니다. 우리 개발자들은 흔히 관성 스크롤이라고 불렀습니다)}.

아래는 2023년 5월 30일 기준 iOS 버전별 점유율입니다. iOS 14 이하는 다 합쳐서 2% 미만인 것을 알 수 있습니다. 따라서 특별한 경우가 아니라면 더이상 하위 호환성을 염두에 둘 필요가 없습니다.

아래는 웹킷_{(사파리 브라우저의 엔진)} 공식 사이트의 당시 발표를 번역한 것입니다.

iOS 및 iPadOS의 가속 스크롤_{(Accelerated Scrolling)}

메인 프레임의 가속 스크롤은 iOS의 웹킷에서 항상 사용할 수 있었습니다. 또한 개발자는 -webkit-overflow-scrolling이라는 CSS 속성을 사용하여 오버플로 스크롤에 대한 빠른 스크롤을 선택할 수 있었습니다. iPadOS 및 iOS 13에서는 이러한 작업이 필요하지 않습니다. 서브프레임_{[메인 프레임과 대비시켜서 화면 안에 들어간 화면을 뜻하는 말로 이해하면 되는 것 같다 – 형우]}은 더 이상 콘텐츠 크기에 맞게 확장되지 않고 스크롤 가능하며, overflow: scroll;과 iframe은 항상 가속 스크롤을 적용합니다. 빠른 스크롤 에뮬레이션 라이브러리는 더 이상 필요하지 않으며, -webkit-overflow-scrolling: touch; 는 iPad에서 아무 일도 하지 않습니다. 아이폰에서는 여전히 스크롤 가능한 요소에 CSS 쌓임 맥락_{(stacking context)}을 생성하는 부작용이 있습니다. 개발자는 콘텐츠를 테스트해 하드웨어 가속 스크롤이 콘텐츠에 어떤 영향을 미치는지 모든 곳에서 확인하고 불필요한 우회로를 제거해야 합니다.

출처: New WebKit Features in Safari 13