iPhone7でTwitterのウィジェット(iframe)がはみ出す【解決】

iPhone7(iOS 10.3.2)でTwitterの公式ウィジェットを貼り付けたサイトを確認したところ、iframeが親要素の幅を超えてはみ出す事象に出くわしました。
iPod touch 5th(iOS 10.3.2)では発生しないという不思議な現象・・
ググると同様の報告がいくつかあり、おそらくiOS特有のバグとのこと。
おそらくそうでしょうし、safariのバージョンやら何やら調べたところで崩れた原因の特定に至ることはなさそうと判断し、修正方法を模索することにしました。

同様の報告のあるサイトの情報によると、iframe に width:100%; を指定すると崩れる(拡がる)とのことで、確かにiframeのstyleにその記述が出力されている・・(公式ウィジェットが出力するソース)。

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; height: 1000px; padding: 0px; border: none; max-width: 100%; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px;" data-widget-id="profile:xxxxxx" title="Twitter Timeline"></iframe>

他の方の解決方法は、メディアクエリーで固定幅にしてしまう、というものでしたが、レイアウトの都合でその手段はとりづらい・・というわけでいろいろ試した結果、ウィジェットのレイアウトに必要な最大幅以上の幅で上記style属性を強制上書きすることで解決しました。

例えば・・・
◎画面幅が768px以上の時にTwitterウィジェットの幅が400px固定
◎768pxより小さい時はコンテンツ領域(画面の端から20pxの余白あり)の100%
とすると、Twitterウィジェットのとりうる幅は最大で728pxとなるので、CSSに

.twitter-widget-wrapper iframe { width: 740px !important; }

などと記述します。(728pxより大きければ何でもOK)

そうすると、公式ウィジェットのstyle属性の width:100%; は固定サイズ指定で上書きされますが、親要素の表示幅を超えているので採用されず、max-width: 100%; が採用され、結果的にコンテンツ領域の幅100%で表示されます。
論理的に考えれば、幅100%指定で崩れるのでこれでは崩れてしまいそうなものですが、そこは所詮はバグ、なぜかこれできっちり100%で表示してくれます。

さて、Appleのiframeバグの修正が早いか、Twitterのstyle属性から width:100%; が消えるのが早いか。
iframeは意外に使い所が多いので(GoogleマップとかYoutubeとか)、早く直して欲しいですね。

スポンサーリンク