たまたま、前記事「WordPress：テンプレート階層がややこしすぎる」の投稿時にプラグイン Highlighting Code Block を導入しましたら、Android の Chrome だけ固まってしまうトラブルに見舞われました。
まだ根本的な解決には至っていませんがその顛末です。
01経緯
前記事「WordPress：テンプレート階層がややこしすぎる」にも少し書いてありますが、表示が止まってしまうのは、Android の Chrome だけです。原因を特定するためにやったことは、
- デスクトップでは問題なし
- Android の Firefox, 他のブラウザでは問題なし
- iPhone の Chrome では問題なし
- 該当Android Chrome のキャッシュ、データ、アプリを削除するも解消せず
- 実機を DevTools で調べますと、ほぼ一定のところで停止することは判明するも、原因は特定できず
ということで、直前に導入した Highlighting Code Block を無効化したところ、表示も止まらなくなったということです。その後、
- Highlighting Code Block 意外の Javascript をすべて外すも解消せず
- WordPress のテーマを変更するも解消せず
現在のところ、他の Android での確認が出来ていませんので、このトラブルが Android の Chrome 全体のものか、私の Android Xiaomi Mi Mix 2s 個別のものかはわからないという状態です。
02Prism.js で試してみる
プラグイン Highlighting Code Block は Prism.js を使っていますので、直接導入して試してみました。
かなりおかしなことが起きます。
まず、Highlighting Code Block 導入時はうんともすんとも動かなかったのですが、Prism.js 直接ですと10秒ほどで復帰したりします。したりするというのは症状自体が一定しないという意味です。
で、さらにいろいろ Prism.js のプラグインを入れたりして試してみますと、
- プラグインなしでは復帰までの時間が長い
- プラグインの Toolbar を導入すると、症状が出なくなる
ただし、<pre></pre> の要素をタップすると数秒固まる
タップしない限り、コードの横スクロールなどに問題はない
Toolbar は Copy to Clipboard Button をクリックしますと同時にチェックが入ります。Copy to Clipboard Button を外しても症状は出なくなります。他のプラグインでは数秒固まる症状は変わりません。
どういうことなんでしょう？
03Chrome のバグ？
こんな投稿がありました。
今年の2月16日の投稿で同じ症状が報告されています
これもそうですね。
Android Chrome のバグのようで、9月時点で解消されていないようです。
私の Android のバージョンは 10 です。えらく古いですね（笑）。Chrome は 107.0.5304.91 です。こちらは最新（かな？）です。
さて、シンタックスハイライトはどうしましょう？
