Chromeでしか表示されないjpgファイルがある

Question

コーディングテスト中に、chromeブラウザでしか表示されないjpgファイルがありました。

スマホでもchromeブラウザなら問題なく表示されるのですが、firefoxやsafari、LINEブラウザなどでは表示されません。

横幅と縦幅の領域を確保した状態で空白となっています。

画像は、Photoshop2021でpngで発行したものを使っています。

WEBPというわけでもないですし、同じ方法で発行したものでも表示できるものとそうでないものがあるので、違いは何なのかわからずにいます。

Comments

[yambejp]

choromeでダウンロードしてローカルから各ブラウザで表示させてみてください

[Himamura]

ご回答ありがとうございます。
やってみましたが、結果は同じでした。

表示されない画像を別の場所に移して表示してみたら、表示されました。
逆に表示されている画像を表示されない画像の場所に移してみたら、表示されなくなりました。
位置の問題？今までなかった現象なので解決策が不明です。

https://shared.danroinc.com/idk-cm/
URLはこちらです。

[Himamura]

WordPress、Elementorを利用して作成しております。

[Himamura]

解決しました。
Elementorで、画像に対してマスクを掛けていたのですが、マスクに利用していた画像がHTTPSになっておりませんでした。
サイト全体をSSL化し、マスクを一度削除してもう一度設定したところ解決いたしました。

Answer 1

セキュリティの問題かと思います。マスク画像URLをhttpsに切り替えてみてはどうでしょうか。

.elementor-14 .elementor-element.elementor-element-ac5d8bf.elementor-widget-image .elementor-widget-container img {
	/* -webkit-mask-image: url( http://shared.danroinc.com/idk-cm/wp-content/uploads/2021/10/mask01.png ); */
	-webkit-mask-image: url( https://shared.danroinc.com/idk-cm/wp-content/uploads/2021/10/mask01.png );
	-webkit-mask-size: contain;
	-webkit-mask-position: center center;
	-webkit-mask-repeat: no-repeat;
}

Answer 2

解決しました。
Elementorで、画像に対してマスクを掛けていたのですが、マスクに利用していた画像がHTTPSになっておりませんでした。
サイト全体をSSL化し、マスクを一度削除してもう一度設定したところ解決いたしました。