macOS Ventura (v13.1) の Chrome (108/109) で Qiita の数式が崩れて見える件です。
Qiita は Mathjax のバージョンアップを v2 から v3 に切り替えました。もしかしたら状況が変わるかもしれません。
参考) https://blog.qiita.com/update-math-jax-v3/
はじめに
自分は 2023年1月12日に Qiita の記事の数式表示がおかしい事に気づきました。
ちょっと待って。Qiita の数式MD。レンダリング結果、だいぶ汚くなってない？ 以前はもっと自然な数式画像だったよね。。 qiita.com/yoya/items/510...
午後 4:32 2023年1月12日
明らかに以前より数式の表示が崩れています。
ちなみに以前はこう。。
午後 5:17 2023年1月12日
MathJax Math Renderer (クライアント側での回避策)
(クライアント側) MathJax 設定で問題を回避可能です。右クリックで設定できます。
Math Settings > Math Renderer の設定を HTML-CSS かfら Common HTML に切り替えたら、以前の表示に戻りました。٩( ᐛ )و
午前 11:33 2023年1月13日
ただ、回避はできますが、クライアント側の対処だと、影響をうける閲覧ユーザ皆の手間がかかりますし、 Chrome を更新(108→109)するとまた設定が戻ったりして、その度にやり直すのも面倒です。
Chrome 更新せずとも再起動だけで設定がデフォルトに戻るようです。ページを開き直す分には設定を持続します。(2023/1/28)
MathJax Config (サーバ側での回避策)
マニュアルを見た感じ、サーバ側で頑張れば JavaScript で MathJax 設定して回避できそうです。
そもそも macOS Chrome 側の問題っぽい(後述する issue の話)ので根本対処でなく、あくまで一時的な回避です。
不具合の出る条件を絞り込み、その環境でのみサーバ側で以下の制御を行えば、ユーザ側の手間をかけず対処可能なはずです。
MathJax.Hub.Config({
showProcessingMessages: false,
jax: ["input/TeX", "output/HTML-CSS"],
TeX: {
TagSide: "left",
Macros: {
RR: '{\\bf R}',
bold: ['{\\bf #1}',1]
}
}
});
例えば、Common HTML に切り替えたい場合は、以下のようにできます。（試してないので多分でしかないです)
MathJax.Hub.Config({
...(略)
jax: ["input/TeX", "output/CommonHTML"],
...(略)
});
Qiita さん、検討してくれないかしら。(๑╹ω╹๑ )
ただ、適用するにしても副作用がないか要確認です。
例えば、この設定がクライアント側に記憶され、対応が不要になったずっと後で地雷になったりとか。
(追記： Qiita は Mathjax のバージョンを上げる事で解決したようです)
MathJax issue
恐らくズバリの issue をみつけました。
- STIXNonUnicode rendering issue in Chrome on Mac with the HTML-CSS renderer #2988
雑にまとめると
- macOS Chrome の HTML-CSS 表示で崩れる
- STIXGeneral、 STIXNonUnicode フォントに関わる問題
- Chrome の macOS フォント検索の仕方に問題がありそう(？)
- HTML-CSS は最も古い設定だが最も壊れやすく、デフォルトから変える提案はなされているが、他項目も完璧ではないので今のまま
まとめ
- macOS Ventura だと Chrome 108 あたりから Qiita の数式が崩れて見える
- MathJaxの MathML Renderer を変更する事で回避可能。クライアント側でもサーバ側でも変更可。
- 特定バージョンの macOS + Chrome で問題がある事は MathJax 開発側でも認識されている。