【CSS】iOSのハンバーガーメニューがスクロールできない場合の修正方法

スマートフォンでハンバーガーメニューのコンテンツ量が多く
スクロールをさせたい場合、positionプロパティとoverflowプロパティを指定することがありますが、
iOSで以下のような設定をしてしまうとハンバーガーメニューのスクロールが効かなくなります。

• positionプロパティがabsoluteまたはfixed
• heightプロパティが固定幅（相対値、絶対値）
• overflowプロパティがスクロール指定（autoやscroll）
• -webkit-overflow-scrollingプロパティがtouch
• 同じ要素にpositionプロパティとoverflowプロパティを指定

実際のcssで以下のような記述の場合、正常にスクロール動作しません。

.menu {
    position: fixed;
    top: 0;
    left: 0;
    overflow: auto;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

positionプロパティとoverflowプロパティを別の要素に指定するとスクロール出来るようになります。

/* 位置指定用 */
.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* スクロール用 */
.menu .inner {
    overflow: auto;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}