個人的に心躍ったガジェットを紹介するブログ「浮ろぐ」をやっている「うきしま」です。
先日から私のM1 MacBookProでGoogle Chromeの画面表示が崩れるという症状が発生していました。
私は仕事でもプライベートでもメインのブラウザにGoogle Chromeを使用しています。
今回この様な問題が発生した事でChromeが正常に使えないと色々と困ってしまう事を痛感しました。
ここ数日はこのChromeの画面表示が崩れてしまう件について何とか復旧できないか私なりに色々試したりしていました。
結果から言うとGoogle Chromeの表示が崩れてしまう問題を解消する事ができました。
この記事ではGoogle Chromeの表示が崩れてしまう問題を解消する為に私が試してみた事や実際に症状を解消できた方法について紹介します。
M1 Macを使っている人で私と同じ様にChromeで表示が崩れてしまう問題が発生していて困っている人へ何かしらの参考になれば幸いです。
環境について
同様の症状が発生していても原因や環境が異なる事でこの記事で紹介する方法を実施しても症状が解消しないという事も十分にあり得ると思います。
そこでまず私の環境について明記しておきたいと思いますのでぜひ参考にして頂ければと思います。
- 機種：MacBook Pro (13-inch, M1, 2020)
- OS：macOS Big Sur ver11.2.3
- ブラウザ：Google Chrome ver89.0.4389.90（Official Build） （arm64）
ちなみにGoogle ChromeについてはApple SiliconいわゆるM1チップ対応版の物をインストールしていました。
どんな症状が発生したのか？
記事タイトルにもある通りGoogle Chromeで画面表示が崩れてしまうという症状が発生してしまいました。
プライバシーの観点から見せる事ができませんがChromeでgmailを閲覧した際に一番画面表示が崩れていました。
例えばgmailでメールが一覧表示されている画面でメール上にマウスポインターを合わせるとそのメールの背景が赤色になってしまったりといった感じですね。
Chromeでgmailを使用した場合以外にも画面表示が崩れてしまう症状が多々発生していました。
以下では私の環境においてChromeの画面表示が崩れていた実際の具体例についていくつか紹介します。
ホーム画面上のユーザーアイコンが正常に表示されない
Google Chromeを起動すると通常画面の右上、ブックマークバーの下あたりにgmailや画像といった物が表示されているエリアがあります。
そこにユーザーアイコンが表示されるエリアもあると思いますが私の環境ではユーザーアイコンではなく赤と黒のグラデーションの謎のアイコンが表示されていました。
ユーザーアイコンが表示されない程度ならブラウザを使用する上で困ることはそこまでないですが正常に動作していない事が視覚的にわかってしまうので気持ち良くはないですね。
ちなみにYoutubeの動画投稿者のアイコンについても同じ様な物が表示されてしまっていました。
WordPressの記事編集画面のブロックメニューの表示が崩れる
こちらはWordPressで記事を書いている人にしか関係ない話かもしれませんが、記事投稿画面の左上にある「ブロックの追加」ボタンを押した際に表示されるメニューについてもおかしくなっていました。
具体的には下の画像の様に「ブロック」タブの箇所が黒くモザイクがかかった様な状態になっていました。
WordPressの記事編集画面の設定メニューの表示が崩れる
こちらも上記と同じくWordPressの記事投稿画面での症状ですね。
上記の症状と同じくこちらにも下の画像の様に「投稿」タブの上に黒くモザイクがかかった様な状態になっていました。
WordPress関連で言えば他にも記事編集画面の「詳細」表示ボタンを押すと何も表示されないという症状もありました。
SafariやFireFox等の他のブラウザで確認した際には正常に表示されていたのでどうやらGoogle Chromeのみで発生してる症状であると言えると思います。
Chromeの表示が崩れる症状について大体共通していると感じた事としてユーザーアイコンといった様な画像やメニュー画面関連の表示が崩れている事が多いという印象を受けました。
ブログ記事作成だけでなく幅広い用途で使っているブラウザなだけにこういった問題が発生するとかなり影響がある事を痛感しましたね。
試した事
Google Chromeの表示が崩れてしまう症状を解消する為に私が試した事は以下の通りです。
- Google Chromeの履歴とキャッシュを削除
- Apple Silicon対応版のGoogle Chromeを再インストール
- Google Chromeの「拡張機能」を全てオフにした
- Google Chromeの「詳細設定」の「ハードウェアアクセラレーションが使用可能な場合は使用する」をオフにした
結論から言うとGoogle Chromeの「詳細設定」の「ハードウェアアクセラレーションが使用可能な場合は使用する」をオフにした事でChromeの表示が崩れてしまう問題を解消する事ができました。
ネットで調べていると履歴とキャッシュを削除する事で症状を解決できた人もいる様ですが私の環境では問題を解消する事はできませんでした。
さらにChromeの拡張機能を全てオフにしたり、アプリを再インストールしてみましたが同じくChromeの表示が崩れる問題を解消する事はできませんでした。
ちなみに私は最悪アプリの再インストールで治るだろうと考えていたので治らなかった時は軽く絶望しましたww
もし同じ様にアプリの再インストールまで試してみたけど治らなかったと言う人は以下の手順で「ハードウェアアクセラレーションが使用可能な場合は使用する」をオフにしてみると問題が解消するかもしれません。
「ハードウェアアクセラレーションが使用可能な場合は使用する」をオフにする方法
手順１：Google Chromeの設定画面を表示する
Google Chromeの画面右上にある︙（縦の3点リーダー）をクリックして設定画面を表示します。
Macであればショートカットコマンド(commandキー + ,(カンマ))を入力する事でも設定画面を表示する事ができます。
手順２：「Googleの設定」の一番下にある「詳細設定」を開く
設定画面を表示したら画面の一番下にある「詳細設定」を開きましょう。
「詳細設定」は下の画像の様に表示が小さいので見落とさない様に注意しましょう。
手順４：項目「システム」内の「ハードウェアアクセラレーションが使用可能な場合には使用する」をオフにする
「ハードウェアアクセラレーションが使用可能な場合には使用する」の設定様スライドバーを操作してオフにしましょう。
スライドバーは下の画像の赤枠で囲まれた部分の様に右側に配置されていると思います。
ちなみに「ハードウェアアクセラレーションが使用可能な場合は使用する」の設定値を変更するとGoogle Chromeを再起動する必要がありますので設定を変更したらChromeを再起動する事を忘れない様にしましょう。
まとめ
今回はM1 MacにおいてGoogle Chromeの表示が崩れてしまう問題を解消する為に私が試した事と実際に解消できた方法について紹介しました。
M1 Macを使っている方でChromeの表示が崩れてしまって困っている人は一度「ハードウェアアクセラレーションが使用可能な場合は使用する」の設定をオフにしてみると問題が解消できるかもしれません。
私のMacでは「ハードウェアアクセラレーションが使用可能な場合は使用する」の設定をオフにしてから表示が崩れる件も含めて不具合などは発生していないです。
この記事が私のM1 Macと同じ症状が発生している方の参考になれば幸いです。
「浮ろぐ」では今回紹介した様なパソコン等の各種デバイスやソフトを使う上でのちょっとしたヒントや参考にして頂ける様な記事も公開しています。
そういった記事に興味のある人はこちらも是非ご覧ください。
