IphoneSafariのiframe不具合について

Safariでは昔からIframeの不具合があるようだ。
レスポンシブ対応では、要素に対しwidth100%とし、max-widthを指定することは多いと思うが、Iframeの場合、width100%にするとレイアウトが崩れるというものだ。

Twitterやインスタなどの組み込みタグは参照先のJSでIframeを生成し、widthを指定しない場合は100%となる。

この不具合をTwitterやインスタ側がApple仕様に対応するのか、Apple側が他ブラウザと同様の仕様に対応するのかは分からないが、現時点ではどちらも対応していない状態だ。

つらつらとウンチクを綴ったが、ようはSafariのiframe対応である。

Twitter例

<div class="twitterBox">

<a class="twitter-timeline" data-height="300" data-theme="dark" href="【タイムラインのURL】">Tweets by FF_XIV_JP
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8">

</div>

<style>
.twitterBox {
  width: 100%;
}
.twitterBox iframe {
  width: 740px !important;
}
</style>

width100%は固定サイズ指定で上書きされるが、親要素の表示幅を超えているので採用されず、max-width100%が採用され、結果的にコンテンツ領域の幅100%で表示される。

あくまでも暫定対応の域だが、１つの小細工として知っておくと便利かも。

- シェア -

いいね: