문제

아이폰 사파리에서 스크롤이 버벅이는 증상이 간헐적으로 나타났다. 잠깐 멈칫하다가 잠깐 기다렸다가 하면 또 잘되고.. 크롬은 또 별 문제가 없다.

1차 원인

모바일뷰로 맞춰진 화면이었지만, PC 에서 보니, 스크롤바가 이중으로 나타났다.

1차 해결

해결방법이 의외로 단순했다. 안쪽 div 의 overflow: hidden; 처리로 간단히 문제 해결~ 하지만, 진짜 원인이 무언지 궁금했다.

진짜 이유

구글링도 해보고, MDN도 보고 했지만, 하하; css 에 대한 이해도가 낮아서 정확한 이유는 모르겠다.

현재 제일 의심가는 부분

DOM 구조가 다단 div 구조였는데, 상위 div 중 하나에 overflow-x: hidden; 코드가 들어있었다. 이 경우, overflow-y 는 기본값인 visible 에서 auto 로 변환이 된다. 이렇게 되면서, 스크롤바가 이중으로 생성된 것으로 보인다. 1차 해결법 대신, overflow-x: hidden; 코드를 지워도 해결이 된다.

<aside> 💡 https://stackoverflow.com/questions/19637398/css-overflow-problems-with-fixed-position-divs

</aside>

어떤 방법을 써야할까?

css 에 대한 이해도를 높여서, 왜 저런 일이 발생했는지를 파악해야 정말 제대로 된 방법을 찾을 수 있을 것 같다. MDN에 단서가 있는 듯 하다. (https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)