[CSS] IOS에서 스크롤 바운스 효과 비활성 버그

엘리먼트 스크롤 업, 다운 시 특정 엘리먼트 숨김 및 노출 처리 시 사파리 브라우저만 이상 발생

overscroll-behavior

• CSS overscroll-behavior 속성은 스크롤 영역의 경계에 도달했을 때 브라우저가 수행하는 작업을 설정한다.

const StyledBox = styled(Box)<{ type?: "page" | "modal"; offsettop?: number }>`
  position: relative;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: none;
  height: calc(100% - ${(props) => props.offsettop}px);
  padding-bottom: 50px;
  max-height: ${(props) => props.type === "modal" && "40vh"};
`;

 

[해결한 방식]
스크롤시 정상작동하는 브라우저와 사파리 브라우저 두개의 로그 확인 후,
사파리 브라우저에서 스크롤 top 0일 때 음수값 나오는 부분 확인 및 사파리 브라우저만 디바운스 현상이 일어나는 걸 확인