iOS Safariでiframe要素の高さが広がってスクロールができない

iOS Safariでiframe要素の高さが広がってスクロールができません。

原因

この現象はそもそもiOS Safariではiframe要素の高さを指定しても固定されず、iframe要素内のコンテンツの高さになります。
これにより、スクロールが可能だったiframe要素の場合は、スクロールができくなってしまいます。

回避方法

この現象の対策としては次のようなCSSにすることで、iframe要素でスクロール可能にすることができます。

overflow-yプロパティの値をautoにしているのは、スクロールを可能にするためでもありますが、scrollにしてしまうとAndroidなどほかのブラウザではiframe要素側のスクロールを利用するため、autoに指定しています。

-webkit-overflow-scrollingプロパティは値をtouchにすることで慣性スクロールを可能にしますが、iframe要素がスクロール可能な要素で優先的に動作してしまうため、その優先する要素を変更させるため、-webkit-overflow-scrollingプロパティを指定しています。