iosでスクロールできない時

何度か同じバグにぶち当たってる気がするので、備忘録も兼ねて書いておきます。

スマホでナビゲーションを実装する時にスクロールできたり、できなかったりするバグがある。
jsの書き方が悪いのかな？とか思って調べてみたが、なんてことはない、cssの書き方の問題でした。
ios9 と ios10 で確認済み。

原因

同じ要素の
position プロパティに absolute か fixedで絶対位置指定をしている
height プロパティと overflow プロパティを使って要素内スクロールさせようとしている
-webkit-overflow-scrolling プロパティに touch を指定している

Before

.menu-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 11;
  max-height: 77vh;
  padding-top: 55px;
  background-color: #fff;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  overflow-y: scroll;
}

解決方法

After

.menu-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 11;
  background-color: #fff;
}
.menu-content-inner {
  padding-top: 55px;
  max-height: 73vh;
  -webkit-overflow-scrolling: auto;
  overflow-scrolling: auto;
  overflow-y: scroll;
}

position と overflowを別の要素に指定してあげる。

overflow-scrollingをautoにする。

これで解消できました。
touchを指定したままだと、解消できなかったのですが、autoだと慣性スクロールができないので、使い勝手が悪いです。。

何か解決方法ないですかね。

参考URL
https://qiita.com/chocolamint/items/67d25933880404c93db0