IOS 사파리 모달 뒤 배경이 드래그되는 현상

position: fixed로 배경을 주고
모달을 그 내부에 띄우면 뒤 배경이 드래그와 스크롤이된다.

웹에서도 scroll이 되지만 이는 body에 모달이 열려있는 동안만 overflow:hidden을 주면 해결되는데,
모바일 사파리는 그런 거 안통하더라.

결국 찾아낸 방법

.background {
  position: fixed;
  height: 100vh;
  width: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, .85);
}

.modal__wrapper {
  width: 360px;    
  height: 800px;   // 모달의 사이즈 지정
  overflow-y: auto;
}

.modal {
  height: 100%;
  overflow-y: auto;
}

.modal__contents {
  min-height: calc(100% + 1px);
}

강제로 1픽셀의 스크롤을 먹여주면, 모바일 브라우저만의 오버스크롤 효과도 줄 수 있고,
배경이 스크롤되는 현상을 모달이 대신 가져간다.

모달이 스크롤되지 않아야 한다면?
스크롤 위치 저장해놓고 다시 돌아갈때 해당 위치로 보내던가 해야지 뭐...

이거 말고도 모바일 브라우저만의 주소창이 모달 영역을 침범한다거나 하는 문제도 발생해서
강제로 주소창을 닫도록 스크롤시켜야하나 / 스크롤 양을 늘려야하나 등등의 생각이 많은데 답이 나오진 않았다.

모바일 브라우저 주소창 영역 문제없이 반응형 관리하는 방법을 언젠가 한번 쭉 정리해야겠다.