【IE/FF】画像が潰れる問題勃発！

経緯

先日、某企業さまのサイトリニューアルを行なっていた際、GoogleやSafariなどのブラウザでは問題なく表示されていた画像が、なぜかInternet ExplorerとFireFoxでは縦横比が潰れてしまう事件が発生！！IEが崩れるのはいつものことだけど、FFまで崩れている…なぜだ…

調査

FireFoxで画像が崩れてしまう原因をひたすら調査…そもそも画像の崩れが起こったという事象も少なく、既存サイト内に転がっている記述では全く解決ができませんでした。

そこで、そもそもの画像が挿入されているコードの記述から見直してみることにしました。

今回、崩れを起こしていた画像はみんな大好き「Flexbox」の中に設置されていることが判明…「Flexbox」怪しいゾ！！！

次は「Flexbox」にフォーカスして今回の崩れの原因を調査してみました。

解決

原因を調査していくと「IE11/EdgeでFlexboxがバグる」という事象を発見！！

そこで見つけたcssの記述が…

img{
  flex-shrink: 0
}

一か八か<img>タグにこのcssを指定してみると…

解決したー！！！！！正しい比率の画像が表示されたー！！！

どの記事にもFireFoxでのバグについては書いていなかったが、今回この「flex-shrink: 0」というcssを反映させることで見事にIE・FFともに画像が崩れるバグが解消されました。

学び

この答えに辿り着くまでに何通りものcssの記述を試し、その度に違う問題が起こったり…
めちゃめちゃコーディングが得意なわけではない自分に解決できるのかすらわからないバグだったけど、try＆errorを繰り返して見つけた解決方法でした。

コーディング・プログラミングの醍醐味ってこのバグ解消をできた瞬間の達成感と優越感ではないかと感じましたw

これだから嫌いって言いながらもコーディング…やめられない…！！