web制作

TwitterウィジットをiOS Safariに設置するとはみ出す

takuya_k 、

Twitterウィジット

ホームページにTwitterのタイムラインなんかを読み込むためのものです。
https://publish.twitter.com/

先日お客様から要望があったので設置したのですが、iOS Safariで確認してみるとどうもはみ出す…
width:100%を指定しているのにどうしてもはみ出す…

原因

この件、色々な方のブログ等読み漁っているとどうやらSafari側のバグだそうな、みなさんjQueryやらCSSやらで対策を行っているようでしたが
私は結構強引に対象してしまいました。

html

<div class="twitterBox">
twitter読み込みタグ
</div>

css

  .twitterBox {
    width: 100%;
  }
  .twitterBox iframe {
    width: 90% !important;
  }

こんな感じで超強引にはみ出さなくしました。

おかしなもので90%を少しでも越えてしまうとまたはみ出してしまうんですよね、若干幅は狭まってしまいますが一旦これで回避したいと思います。
早くこんな事しなくても良いようになれば良いのですが。