はじめに
imgタグの画像がchromeでは正常に表示されるのに、safariだとなぜか縦に伸びて表示されてしまうのでその解決策を載せていきます。
問題
chromeでは問題なく画像が表示されているのに、safariではなぜか画像が縦に伸びてしまう(バイトで遭遇したのでサンプルコードだけ載せます)。
<div style="display: flex">
<img src="XXXXXXX">
<img src="XXXXXXX">
</div>
解決策
safariではdisplay:flex;配下の画像は縦に伸びてしまうみたいです。この場合imgタグをdivなど他のタグで囲ってあげると解消されます。
<div style="display: flex">
<div><img src="XXXXXXX"></div>
<div><img src="XXXXXXX"></div>
</div>
align-items: flex-start;を付与してあげるやり方もあるそうです。
<div style="display: flex,align-items: flex-start">
<img src="XXXXXXX">
<img src="XXXXXXX">
</div>
おわりに
safariだとchromeで見れてた画像がぼやけたり、ブラウザバックの挙動が少し違ったりするので少し大変ですね。
参考