前回、制作者の立場からChromeのバグを解消するための方法を記載しました。
【CSS】Chromeでtransitionとblurをかけるとチラつくバグを解消する
ですがこの現象がなぜ起こるのかまでは解き明かしていませんでした。
そこで調査し直した結果、以前にも同じようなバグがあり、これを解消する術があることがわかりました。
原因はChromeの設定「ハードウェア アクセラレーション」
Chromeには「ハードウェア アクセラレーション」という設定があり、これがチラつきを引き起こしているようでした。
この設定を無効にすれば解消されます。
①Chromeの右上にある三つの●から、設定を選びます。
②左のメニューから「デザイン」を選択し、デザインページの一番下にある「詳細設定」をクリック
③さらに下まで見ていくと「システム」の項目に「ハードウェア アクセラレーションが使用可能な場合は使用する」が有効になっているはずです。
これを無効にし、再起動をかけます。
チラつくWEBページを見て見てください。(前回の投稿ページなどで検証してみると良いかもしれません。)
もうチラつきが無くなっているかと思います。
ハードウェア アクセラレーションとは?
普段、動画や画像はCPUを稼働させて閲覧するものですが、
これをGPU(Graphics Processing Unit)…つまり画像が得意な処理分野に処理してもらおう!
というものです。某カードゲームの「ライディング●●●●!アクセラレーション!」とは違います。
しかしGPUがないPCはこれを処理できずに最悪固まってしまう…という落とし穴も存在するなど、あまり良いとは言い難い設定です。
さらにはこの現象は2019年3月頃に頻繁に見られたようで、調査しているとその頃のお話がよく出てきます。
恐らくですが、今回アプデ後にチラつくようになった原因として、
アプデ後にこの項目にチェックが入った状態でのスタートとなったから、チラつくようになったのでしょう。
制作者の観点
この設定はユーザー個人が自由に選べる設定です。
その為、制作者としてはどのような設定であってもチラつかないようにしておきたいですね。
解決方法はこちらに掲載しましたので、よければご覧になってください。
参考ページ
余談
どうやらこの設定はZoomにもあるらしく、この設定をオフにすることで映像が見られるようになったという事もあるようです。