GoogleChromeブラウザで画像表示が崩れてノイズっぽい表示になる時の原因の話

ブラウザでヤバいページを見る時は、必ずシークレットモードで閲覧する、ユゲタです。 ヤバいページというのは、Cookieを書き込むのがヤバそうなページの事です。 エッチなページを想像した人、奥さんや彼女に履歴を確認されないように、シークレットモードを使うかどうかは ご自身で判断してください。 この間、とあるwebサイトを更新した時に、表示確認してもらった人から 「ページの画像がGoogleChromeブラウザだけ崩れている」 という、報告が入りました。 ユゲタの使っているGoogleChromeブラウザでは、全く問題なく見えているし、 その人も、別のブラウザでは問題なく見えているとの報告。 そのサイトの運用側の人であれば、その崩れを直したいと考えるのが普通だと思いますが、 その温度感の低さに非常にガッカリしたんですが、とりあえず、画像崩れの原因を探すことと、 正常に表示できるようにすることが、直近のやるべきことですね。

原因究明

GoogleChromeブラウザだけが見た目が崩れるということで、サイト側やネットワーク側の問題ではないことは想像できます。 ちなみに、画像の崩れってどういうものかというと、 正常に見えた場合は、 これが、次のように崩れて見えます。 ユゲタが目をつけたのは、まず「Chromeブラウザの機能拡張」ですね。 色々な機能を盛り込める便利機能拡張なんですが、たまに悪さをしてくれる機能でもあります。 そして、その悪さをしたあとは、決まって「自己責任」になります。 インストールした人はその「自己責任」を了承するという規約にOKをした状態でインストールしていることになっているので、 ITが苦手な人は機能拡張はインストールをオススメできません。 でも、表示不具合が出ている人は、たくさんの機能拡張が入っているので、すぐに原因はわからないようでした。 「キャッシュを無効」にしたり、「ブラウザを最新版に更新する」という事もやってみたけど、改善はされません。 次に、ググってみました。 「GoogleChromeブラウザ　画像　崩れ」 https://build-lifetime.com/windows10-chrome-corrupt/ 一番にヒットしたこのサイトに全ての答えが入っていました。 「ハードウェアアクセラレーション」ですね。 ただ、このサイトでは、「オフにする」と書いてありましたが、「使用可能な場合は使用する」を「オン」にする設定にすると、解決しました。 同じ症状の方のために、設定の様子を画像で用意しました。 1. Chromeブラウザのメニューリストから「設定」を選択（アプリの右上の方にある縦に３つドットがあるアイコンです） 2. 左メニューの「詳細設定」「システム」を選択すると、下記の画面になるので、そこのチェックをONにしてください。 これで正常に見えるようになりました。 ※ユゲタの方で、この設定をOFFにした時に、同じように画像の崩れを確認できたので、確信が持てました。

CSSによる原因も判明

実は、画像の崩れが確認されたページには、他にも画像が表示されていたのですが、 他の画像は崩れていませんでした。 今回の崩れた画像は、IMGタグで表示していたのではなく、CSSの"background"機能で背景画像として表示させていて、 さらに、 background-blend-mode: color; という、色のフィルタ機能を使用していた箇所だったんですね。 CSSのフィルタ機能は、アクセラレーション機能を使っているので、こういう事が起こり得るという事がわかり、今後のWEB制作の際に あまり使うべきではない機能ということが判明して、貴重な経験でした。

今回のまとめ

ちなみに、今回報告をしてくれていた人は、何故デフォルトでONの状態のこのアクセラレーション機能がOFFになっていたのかというと、 思ったとおり、特定の機能拡張がこの設定を切り替える仕様のものがあったようです。 まず、「Chromeブラウザの画像が崩れてる」という報告を受けた時に、機能拡張を疑ったユゲタの思考は間違っていなかったんですが、 機能拡張をON/OFFして確認しても、解決する道は非常に遠かったのだと、実感しました。 そして、そもそも、この自称を報告された時に、機能拡張の確認は自分で行うのが礼儀であると同時に、 どの端末のChromeブラウザなのかを、開発側に伝えないと、非常に効率の悪い調査をしなければいけない事になるので、 改めて、報告の仕方も、伝える能力が重要であるということを、強く感じました。 まあ、あまり厳しいことをいうつもりはありませんが、今回の不具合発生の担当者は、プログラミングエンジニアでもあるので、 この辺のテスターリテラシーは、持ってもらいたいものだ・・・とこっそりと心に思ってしまった、ユゲタでした。