iOS Safari で絶対位置指定された要素のスクロールが出来ない件

表題の件にハマりました。

• iOS7: 未確認
• iOS8: 再現
• iOS9: 未確認（巷の記事によるとiOS9でも発生する模様）
• iOS10: 再現
• iOS11.3: 動いたり動かなかったりする（対策施した版もアウトだったかどうかははっきり記録してなかったです…）
  • iOS11.X のどこかでは height: 100% の代わりに height: 100vh を使わないと動かない時代もあった模様？
• iOS12.2: どちらの版も動いたり動かなかったりする（つまり本記事の対策では効果なし）

例えばページ上にレイヤーを重ねて、一覧から項目を選択させるような場合に、絶対位置指定した要素の中でスクロールさせたいことってありますよね？

• デモ（過去Safariで動かなかった版）
• デモ（後述の対策を施した版）

このとき、次の条件を満たしてしまうと iOS Safari でスクロールできなくなってしまいます。

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

ちなみに最後の -webkit-overflow-scrolling ですが、これを指定しない場合スクロールは一応できるものの、滑りが悪くて壊滅的に操作性が悪いです。

コード例（抜粋）

.list
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

コード例（抜粋）

<div class="list">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    (中略)
    <div class="item">item22</div>
</div>

この現象を回避するためには position プロパティを指定する要素と overflow プロパティを指定する要素を変えて上げればOKです。

コード例（抜粋）

.list
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
}

.list-content
{
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

コード例（抜粋）

<div class="list">
    <div class="list-content">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        (中略)
        <div class="item">item22</div>
    </div>
</div>