世の中にはWEBサイトを見るためのブラウザは「Google Chrome」や「Firefox」、「Safari」など多くのものが存在しています。
そしてそれぞれのブラウザごとに若干仕様は異なります。
昔からこの業界にいる人であれば「IEで崩れているので直してください」というセリフを聞いたこと、一度はあるのではないでしょうか。
今でこそIEはサポート対応外としている制作会社が多くなりこのような「●●で崩れている」というセリフを聞く機会は減りました。
しかし、時にはブラウザ特有の崩れというのが発生してしまうのは今も変わりません。

今回の記事ではそんなブラウザ特有の崩れの中でも、
「Safari」だけ画像が縦に伸びて表示されてしまう場合の原因と解決方法をご紹介します。

Safariで画像が縦に伸びる状況とは

「Safari」で画像が縦に伸びる状況とはどういうことなのでしょうか。
具体的には以下のようなコーディングの場合、「Safari」では画像が縦に伸びてしまいます。

<div class="wrap">
    <img src="">
    <p>【ブラウザバグ】Safariで画像が縦に伸びる場合の解決方法</p>
</div>

.wrap{
    display: flex;
}

実際の表示はこちら。このサンプルをいろんなブラウザで確認してみて下さい。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

Safariだけ画像が縦に伸びていますよね。

他のブラウザだと問題ないの「Safari」だけレイアウトが崩れてしまうこの現象、不思議ですね。
しかし、上のコーディングを見てもわかる通り、普段からコーディングをしている人からすれば変わったことはしていない、ごくごく普通のコーディングですよね。

Safariで画像が縦に伸びてしまう原因

原因は一言でいうと「Safari」だからです。元も子もない回答ですが、これに尽きます。
昔よりはブラウザごとに差は無くなってきましたが、別々の企業が開発しているブラウザなので若干の違いはあります。
それが、この”「Safari」で画像が縦に伸びる現象”になります。

Safariで画像が縦に伸びる場合の解決方法

「Safari」で画像が縦に伸びる場合の解決する方法は2つあります。

align-itemsプロパティを追加する

display: flex;にalign-items: flex-start;を追加します。

div{
    display: flex;
    align-items: flex-start;
}

これだけでSafari特有の崩れを解消出来ます。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

imgタグを囲う

デザインや構築の都合上、上で紹介したalign-items: flex-start;を追加したくないという場合はこちらの方法を選択しましょう。

それはimgタグを他のタグで囲う。これだけで「Safari」特有の崩れを解消出来ます。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

「Safari」ではdisplay: flex;を指定したタグの直下にimgタグを配置すると画像が縦に伸びてしまうようです。

まとめ

いかがでしたか？
特定のブラウザだけ崩れているという報告があると焦りますよね。それが自分では確認することが出来ない端末やツールの場合は特に。
場合によっては予測で対応して解決しないといけなくなるブラウザ特有の仕様によるレイアウト崩れ。
難しいことだと思うけど、出来ることなら全ブラウザで仕様を統一してほしいですね。