ChromeのuserAgentにSafariの文字列がある

NO IMAGE

こんにちは。tomです。

最近、仕事でWEBシステムのデザインを
いじいじしています。

そんな中、
「ChromeとSafariで表示したときに隙間ができる」
というところで、原因を突き止めるのに思ったよりも
時間を使ってしまったのでメモ。

■原因
    システム上キャッシュしない制御をしている。
    ブラウザを判定して、必要であればiframeを読み込んでいた
    どうもそのiframeのheight:0px;width:0px;visibility:hidden;に
    よって隙間ができている

■対策
    visibility:hidden;→display:none;に変更
    →問題なく隙間がなくなった

■詰まった理由
    キャッシュ制御でiframeを読み込んでいるのですが
    その内容がこんな感じ

var ua = window.navigator.userAgent.toLowerCase();

if (ua.indexOf(‘safari’) !== -1){
    document.white(iframe読み込み(略));
}

なるほど・・Safariを判定してキャッシュ制御してるんだな!
と思っていたのが詰まった原因。

よくよく調べてみたらChromeのユーザーエージェントに「Safari」が
入っていたのでした。

以上、今後同じようなところで時間をとらないためのまとめでした。