iPhoneでtwitterのiframeのスクロールがうまくできなかった問題

なぜかiPhoneでtwitterのiframeのスクロールができない

仕事でちょっとつまずいたので、備忘録として書き留めておきます。

Webページを制作していたのですが、その中でtwitterをWebページで見れるようにしてほしいとの依頼があり、こちらのサービスを利用してペッとコードをページに貼り付けました。
コードを貼り付けたままでは、tweet内容がツラツラと表示されてしまうので、divタグで囲い、overflow: scroll;を追加して、スクロールして見れるようにしました。
PCで確認したところ、とくに問題がなかったのですが、iPhoneで確認してみると、twitterのiframeがスクロールが出来なくなっており、ちょっと困った事態になっていました。

こんな状態です。iPhoneをお持ちの方は試してみてください。
→デモ(未解決ver)

そして、解決した状態はこちらです。
→デモ(解決済ver)

どのiOSバージョンで、どのブラウザでこうなるのか等の詳しい検証はしていません。少なくとも、私のiPhone-iOS_ver11.2.6のsafari、google chrome、firefoxでは確認できました。

まず先に解決法

ここを参考にしつつ、問題を解消しました。
結論から先に書くと、iframeを囲うdivタグに、overflow-scrolling: touch;を追加しました。

どうやら問題はCSSにあるようですね。
詳細を見てみましょう。
iPhoneでスクロールがうまくいかなかった場合のCSSは下記のとおりです。

twitterのiframeをdivタグで囲い、containerクラスをつけた状態です。
overflow: scroll;と書いたので、スマホでもよしなに解釈してくれてうまくスクロールできるものだと思っていましたが、どうもうまくいかない…

.container{
  width: 500px;
  height: 600px;
  overflow: scroll;
  border: 1px solid #000;
}

 

そして、修正後のCSSは下記の通り。

.container{
  width: 500px;
  height: 600px;
  border: 1px solid #000;
  overflow: scroll;
  -webkit-overflow-scrolling: touch; /*-- これが重要っぽい --*/
  overflow-scrolling: touch; /*-- これも重要そう --*/
}

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

うむ。どうやらiframeを囲っているdivタグのoverflow-scrollingが影響しているようですね。

overflow-scrollingって?

調べてみたところ、こんな記事がありました。
慣性スクロールを適用するためのCSSプロパティのようですね。
古い端末では、うまくいかないときがあるとのことで、-webkit-transform:translateZ(0);を追記すると良いとあります。

まとめ

全体的に「…のようです。」といった伝聞の形式になってしまって申し訳ございません…。

個人的にやりたかったことはできたのですが、なぜこのプロパティを追加してうまくいったのかが謎です。
scrollだけでうまくいくと思っていたのですが…。

ちなみに、facebookのiframeだと親要素のdivタグにoverflor: scroll;を記述しただけでうまくいくんですよね…うーむ。違いは何なんだろうか…
時間があった際に、もっと詳しく調べてみたいと思います!