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

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

プロフィール

愛知県名古屋市にあるジャスウィルで働く社員です。

ジャスウィルは大学事業に特化したシステムを提案しています。『大学向け事務・教務統合パッケージ―TriR Campus』を開発しています。


Facebookページでは、イベントや普段の社員の様子を公開中♪
ぜひご覧ください☆

過去一年の月別記事 全て表示