【CSS】iOSでiframe要素が縦に伸びてしまうときの対処法

本日遭遇した現象で、iPhone で見たときに、iframe 要素が縦にびよーんと伸びてしまい、スクロールできませんでした。
ちなみに、Android では問題ありませんでした。
…この端末に依存するタイプの CSS のずれが本当に苦手…。

さて、こちらの対処法については、下記の Qiita の記事を参考にさせていただきました。

スマホサイトなどでiframe要素をスクロールさせる方法 – Qiita
https://qiita.com/ta__ho/items/904290fa0c8c60b25af1

まず、HTML要素は下記のようになっているものとします。

<div id='content'>
    <iframe src='[表示したいURL]' />
</div>

で、この時、CSS は下記の指定をしていました。

#content {
    width: 100%;
    height: 100%;
}
#content iframe {
    width: 100%;
    height: 100%;
}

Android であれば、上記のコードで問題ないのですが、iOS だと iframe 内の縦長のページが下に伸びてはみ出してしまい、スクロールすらできない状態でした。
そのため、#content に下記を追加します。

#content {
    width: 100%;
    height: 100%;
    /* 下記を追加 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

iframe には追加するプロパティはありません。
ここ重要なのは、overflow プロパティです。
overflow の初期値は visible で、要素に収まらない分ははみ出して表示するので、当然といえば当然ですね。
逆に、変更前のコードで動いてしまう Android が凄い…。
なお、横に伸びてしまう場合は、overflow-x プロパティを使用してください。

-webkit-overflow-scrolling プロパティでは慣性スクロールを有効にしています。
これを追加することで、滑らかなスクロールが実現できます。
これがないと、スクロール途中で突っかかって、スムーズにスクロールできず、かなりストレスになる場合があるので、iOS で利用される場合には、追加することをおすすめします。

以上、iOS で iframa 要素が縦に伸びてしまい、スクロールできない時の対処法でした。
どなたかの参考になれば幸いです。