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」が
入っていたのでした。

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

CTA-IMAGE

インターンシップ2020募集中!

文理不問、全学年対象で体験できるインターンシップです。たくさんの学生さんと会えることを楽しみしています、是非ご参加ください。

1DAY:業界研究&プログラミング体験
IT業界研究セミナーとscratchを用いたプログラミング体験!

1WEEK:システム開発の流れを体験!
要件定義から設計、開発、テストまで、一連の業務を体験します。