iOS Safariでも下までスクロールするモーダルの作り方

iOS Safariでモーダルを表示した際、作り方によっては画面下部のツールバーが表示されているとモーダルを下までスクロールすることができないことがあります。

おそらくheightのとり方に問題がありそうで、width: 100vw; height: 100vh;で設定しているときに発生しました。
それをtop,right,bottom,leftにすることで解決することができました。

コードとしては下記のようになります。

<div class="modal">
  <div class="modal_background"></div>
  <div class="modal_content_wrap">
    <div class="modal_content">モーダル</div>
  </div>
</div>
<style>
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  overflow: scroll;
}
.modal_background {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
/* モーダルをセンタリングするため */
.modal_content_wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal_content {
  height: 1000px;
}
</style>

ちなみに元の作りは下記のようにしていました。

<style>
.modal {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  overflow: scroll;
}
</style>