문제

body {
    overflow-x: hidden;
}

위와 같이 body 태그에 overflow-x: hidden; 를 적용하면 가로스크롤이 동작하지 않아야 하지만 사파리에서는 아래와 같이 여전히 가로스크롤이 동작하는 문제

• 데스크탑&모바일 사파리 모두 동일한 문제 발생
• 크롬&파폭은 정상
  
  
  

해결책

아래와 같이 html 태그에도 overflow-x: hidden; 를 추가하니 해결 됨

html {
    overflow-x: hidden;
}

Ref.

https://www.thewordcracker.com/miscellaneous/모바일-기기에서-수평-스크롤-없애기