iPhone端末で一番下までスクロールできない

Railsで開発中ですが、レスポンシブデザインに対応させようとしたときに、iPhone端末で一応スクロールはできるのですが、一番下までスクロールできません。。（アンドロイド端末,PCサイズではできる模様）

どなたかご回答いただけますでしょうか。

html

<body>
    <div class="wrapper">
      <div class="container" style="max-width: 960px; margin: 0 auto;">
        <%= yield %>
        <footer>
          <p style="text-align: center; color: white;">2021</p>
        </footer> 
      </div>
    </div>
  </body>

footerの部分を見えるようにしたいのですが、見えないのが現状です。

css

@media screen and (max-width:480px){
  .wrapper{
  min-height: 100vh;
  background: url("紫.jpg");
  background-repeat: repeat-x;
  background-size: 187px;
  position: relative;
  padding-bottom: 120px;
  box-sizing: border-box;
}
  footer{
  background: url("紫.jpg");
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; 
}
}

試したこと

こちらの記事
で書かれたことを実行したところ多少スクロールはできるようになりましたが、一番下まで（footerが見えるまで）スクロールできませんでした。
html

<body>
    <div class="wrapper">
      <div class="wrapper-inner">
        <div class="container" style="max-width: 960px; margin: 0 auto;">
          <%= yield %>
          <footer>
            <p style="text-align: center; color: white;">2021</p>
          </footer> 
        </div>
      </div>
    </div>
  </body>

css

@media screen and (max-width:480px){
  .wrapper{
  min-height: 100vh;
  background: url("紫.jpg");
  background-repeat: repeat-x;
  background-size: 187px;
  position: relative;
  padding-bottom: 120px;
  box-sizing: border-box;
}
  footer{
  background: url("紫.jpg");
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; 
}
  .wrapper-inner{
  min-height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
}