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

こんにちは。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」が
入っていたのでした。

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