【解決】HTML：Safariで一部の画像が表示されない

MacのSafari(MacBook Pro、iPad）で、ある画像が表示されない。という現象が起きました。

WindowsのChromeやFirerox,Edgeで見ると表示されている画像が、MacのSafari（マックブックプロやiPad等）で表示したときだけ表示されないのです。

それもWebページすべてではなく、ある画像のみです。キャッシュをクリアしたり、スーパーリロードしたりしたが非表示のまま。

解決法：画像を作り直して差し替え

表示されないpng画像がおかしかったようなので、差し替えたらSafariでも表示されるようになりましたた。

具体的に何がおかしかったかというと、この画像をエクスプローラ上でディレクトリの中に入れると背景透過の部分が、黒くなるというものです。

ちなみにこの画像です。

この投稿をする際に、文章内に挿入はできましたが、「画像」からuploadしようとすると、internal errorが出ました。

PNG等の背景透過画像をJPG等にフォーマット変換を行った場合に背景が黒くなることがありますが、この画像の拡張子は.pngです。

難しいことはわかりませんが、とりあえず、この画像そのものに何か問題があり、Safariだけはその異常に反応して表示してくれないという状況だったようです。

そこで、ややこしい画像を使うのはやめて、再度作り直して画像を差し替えたところ、Safariでも画像が表示されるようになりました。

まとめ

Safariでのみ画像が表示されないという現象が、インターネットで探しても全くヒットしませんでした。背景透過のpng画像を作成する過程で何か余計なことをしてしまうとこういうことが起こるようです。

Windowsで表示されるので、ちゃんとMacでもブラウザチェックしないと見逃すため、要注意。

・メディアクエリでスマートフォンサイズで非表示にしていることが関係しているのかもしれない。と思ったが、そんな難しいことではありませんでした。