みなさんこんにちは、ガノー（Twitter:Ganohr）です。
ChromeやEDGEでサイトを見ている際に、スクロールした後半の文字が潰れたり、ギザギザになった経験はありませんか?
この記事では、そうした「文字が潰れる不具合を解消するための方法」及び「文字が潰れる不具合を解消するための拡張機能である『Aclltbbe』（エクルベ）の導入方法」を解説します。
更新履歴
2023/03/07 Aclltbbe Ver 0.0.3.1を公開しました
2023/03/05 Aclltbbe Ver 0.0.3.0を公開しました
2023/01/05 インストール方法が分かりにくいようなので画像による説明を追加
2022/12/30 公開
Chrome / Edgeで文字が崩れる・にじむ・かすれる・ギザギザになる場合の修正方法一覧
まず、以下のチェック項目を実践し、改善するかどうか確かめてください。
【Chrome/Edgeで文字のにじみを改善するためのチェックリスト】
- PC再起動
- 「PCを再起動し、PCで何も操作せず10分程度待ち、ブラウザを起動」して文字が崩れたりしないか確認してください
- この項目はあなたのブラウザがメモリ不足に陥っていないか確認するための項目です。有識者はメモリ使用量を把握しフラグメントが起こっていないか確認してください。やり方がわからない方は説明通り、PCを再起動した後チェックしてください。
- これで現象が改善する場合はメモリの増設をおすすめします。
- ハードウェアアクセラレーションの有効化または無効化
- ChromeまたはEdgeの設定を開き「システム」から「ハードウェア アクセラレーションが使用可能な場合は使用する」をonまたはoffの状態にしてチェックしてください。
- onの状態で不具合が出てoffにした際には問題ない場合、GPU（グラボ）側に不具合がありますのでGPUを新しいものに換装してください。
- 逆にoffの状態で不具合が出てonの状態で不具合が解消する場合、オンボードGPUに不具合があることが疑われます。しかし、この場合はPC自体を変更するか、気にしないかの選択になるので、自己判断でよいでしょう。
- 拡張機能の無効化
- ChromeまたはEdgeをシークレットモードまたはプライベートモードで開いてチェックしてください。
- もしもこれで現象が改善する場合、「拡張機能を導入し過ぎている」・「特定の拡張機能と相性が悪い」可能性があります。
- 現象が改善した場合は、不要な拡張機能を削除したり、代替の拡張機能を探して乗り換えるなどの対策をおすすめします。
上記3つの対策で改善しなかった場合、当サイト管理者が開発しメンテナンスしている『Aclltbbe』（このページで公開している拡張機能）を導入し、改善を試みると良いでしょう。
なお、設定から「システム」を開く方法がわからない方は、以下のテキストをコピーしてブラウザのアドレスバーへ流し込み、Enterキーを押してください。
【Chrome用のシステムを開くためのアドレス】
【Edge用のシステムを開くためのアドレス】
Aclltbbeの動作原理
この拡張機能は「Chromium（ブラウザ）がパフォーマンス向上のために、必要な描画処理を中途半端にやめてしまうことで引き起こる【文字のギザギザ/にじみ/かすれ/ぼやけ】を、強制的に再度描画し直させる」という処理を行います。
これによりブラウザにスクロールの度に再描画を強制することで、結果として不具合を解消します。
Ver 0.0.3.0 & Ver 0.0.3.1
コメントにてご報告のあった当該プラグインと相性の悪いページで簡単に有効無効を切り替えられるよう機能を実装しました。
このアップデートにより、拡張機能を固定しておき、問題がある場合は拡張機能をクリックしてポップアップを表示し、拡張機能を無効化してご利用ください。
要望や不具合の報告を頂ければ、基本的には前向きに導入・解決策を模索します。
0.0.3.0ではページのURLが完全に合致するページでしか拡張機能を無効化できませんでしたが、0.0.3.1ではドメイン単位で切り替えられるように変更しました。
そのため、逆にドメイン内に色々なレイアウトや複数人が管理しているサイトが入っている場合などで、細かな制御ができませんが、有効化無効化自体がやりやすくなったため現在の実装としました。
ダウンロード
ここをクリックして、文字崩れを修復するためのChrome/EDGE用の拡張機能をダウンロードしてください。
インストール方法
Aclltbbe.zipをダウンロードし、このZIPの内容をAclltbbeというフォルダに展開してください。
このフォルダの場所がわからない方はWindowsキーとrキーを同時に押して出てきた入力ボックスへ、%USERPROFILE%\Downloads\を入れ込んでEnterキーを押してアクセスしてください。
あとはこのフォルダにあるAclltbbe.zipを右クリックして「全て展開」をクリックし、「展開」をクリックすれば大丈夫です。
その後Google Chromeならchrome://extensions/をアドレスバーへ流し込んでください。もしもEDGEならedge://extensions/です。
続けて「デベロッパー モード」を有効化し、「パッケージ化されていない拡張機能を読み込む」をクリックし、先程展開しておいたAclltbbeを開いた後、「フォルダーの選択」をクリックしてください。
うまく行けば、インストールした「Aclltbbe」が拡張機能の一覧に追加されます！
これにより、全てのウェブサイト上で文字崩れを防げるようになります！
技術仕様
技術的な仕様を知りたい方、原因を知りたい方は以下の記事へアクセスしてください。
Chrome/EDGE等のChromiumブラウザのバグによる文字崩れ/文字のにじみ/文字壊れの原因と改善するコードを共有しますGoogleChromeやEDGEなどのChromiumベースのブラウザで発生する「文字の崩れ」を強制的に修復する方法を模索しある程度効果のある対策が可能になったので公開します.なおこの記事はサイトオーナー向けのものであり,ご自身のブラウザへ導入する拡張機能も用意してあります ... 続きを読むWordPressプラグイン版
サイトオーナーはこの拡張機能のWordPressプラグイン版を導入することで、閲覧者の環境にこの拡張機能がインストールされていない状態でも、この問題を防ぐことが可能です。
Chromiumでウェブサイト後半の文字が壊れるバグを修復するWordPressプラグインWordPress公式プラグイン・リポジトリに以下の記事で取り扱った「Chromiumでウェブサイト後半の文字がテキストのLazyLoadingの不具合で壊れてしまうバグ」を改修するプラグインを登録申請中です.このプラグインはAutoptimizeやWPSuperCacheなどと相性がよく何も設定を必要としません.また大概のAMPページでは何も悪さをしないのであなたはプラグインを導入してしまえばあとは何も心配しなくてすみます ... 続きを読むGitHub
GitHub - ganohr/avoid-chromium-lazy-loaded-text-broken-extensions: Avoid Chromium Lazy Loaded Text Broken Bugs For Extensions!Avoid Chromium Lazy Loaded Text Broken Bugs For Extensions! - GitHub - ganohr/avoid-chromium-lazy-loaded-text-broken-extensions: Avoid Chromium Lazy L ... 外部サイトへアクセス
github.com
