先日仕事で作ったホームページが、本番公開去れた時に発覚したSafariブラウザでの表示不具合を調べていた時に、
ChromeとSafariでまるっきり違う表示になっていしまう事象があり、その原因と対策を備忘しておきます。
ちなみに、こういう時クライアントさんからは「スマホの表示がおかしい」としか言ってもらえないので、自分でちゃんとした検証環境を持っておく必要があることと、
推察して事象の原因までたどり着ける根気強さは、必須だということがわかりました。
※クライアントの説明不足感はあまり突っ込まないでおいてあげましょう。
そういえば、Windowsで開発している人は、Safariの表示確認ができないので、iPhoneやiPadを使うか、検証用のMacを用意しないといけない事を考えると、Web開発はMacでやった方がいいのかもしれませんね。
GoogleChromeとSafariでの同じコードで見え方の違うサンプル
実際のページを表示するわけにはいかないので、同様のコードを使って見え方の違いを確認してみましょう。
サンプルコード
<ul class='flex'>
<li href='#1'><img src='img-1.jpg'></li>
<li href='#2'><img src='img-2.jpg'></li>
</ul>
<style>
html,body{
margin:0;
padding:0;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.flex{
display:flex;
gap:10px;
width:500px;
max-width:100%;
margin:0;
padding:0;
}
.flex li{
list-style:none;
}
.flex img{
max-width:100%;
height:100%;
}
</style>
２つの画像をFlexbox(display:flex)を使って、横並びにして、それぞれの画像をflexboxの高さいっぱいに表示するような設定にしています。
この時に、それぞれの画像の一番大きいサイズにピッタリとあってくれるようにimgに対して、height:100;をセットしているんですね。
ブラウザで表示比較
GoogleChromeで表示
Safariで表示
おわかりいただけただろうか？
GoogleChromeは、想定した表示をしているのに対して、Safariでは、縦伸びしているのが分かります。
これはSafariの画像はheightが100%の解釈を、それより上位の階層でheight指定が指定されていないので、ブラウザ表示している縦サイズと解釈しているようです。
GoogleChromeで開発をしている人が多いと思いますが、ホームページ完了時に他のブラウザでの確認作業をしないと、今回のようにこの事象に気が付かないまま本番公開してしまう事になってしまいます。
対応方法
上記の事象を解決するには、いくつかの方法があります。
上位階層にheight指定をする
画像のheightサイズを決めるのが、上位のheight指定がされている必要があるのだとすると、flexや、imgの上位U(またはimg自体）にheightを指定すればいいのです。
.flex{
height:200px;
}
このようにするだけで、高さは整います。
でも、画像サイズにあった指定をしないと、次のようにflexboxと画像のバランスが悪くなってしまいます。
※height:100px;にした時の表示
親要素にflexを設定する
どうやらflexには、単体でサイズを管理する機能を持っているようで、次のように親要素に対して、display:flexを追加設定するだけで、GoogleChromeと同じ表示がされるようになります。
.flex li{
display:flex;
}
Safariブラウザの解釈が間違っているのか、GoogleChromeブラウザの解釈が間違っているのか、正直どちらが正しいかわかりませんが、こういう自体を知っていて、対応できるという知識とスキルが必要ということが改めて認識できました。
ありがとう、クライアント。
あとがき
このsafariでのheight解釈が違う事の問題について、どうやら名前がついていないので、勝手にこの場で命名しておきたいと思います。
「Safariで画像がタテナガになっちゃよ問題」
今後同じ事象が出た時に、この名称でやり取りしてください。
え？ 長いし、めんどくさいし、そんなん知らん？
では、思い出してくれるだけでも幸いです。
