macOS Ventura (v13.1) の Chrome (108/109) で Qiita の数式が崩れて見える件

macOS Ventura (v13.1) の Chrome (108/109) で Qiita の数式が崩れて見える件です。

:::note info
Qiita は Mathjax のバージョンアップを v2 から v3 に切り替えました。もしかしたら状況が変わるかもしれません。
![スクリーンショット 2023-08-01 2.49.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1798/7e6b1814-a563-8f83-1fd7-23e55c717c14.png)
参考) https://blog.qiita.com/update-math-jax-v3/
:::

# はじめに

自分は 2023年1月12日に Qiita の記事の数式表示がおかしい事に気づきました。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"> ちょっと待って。Qiita の数式MD。レンダリング結果、だいぶ汚くなってない？ 以前はもっと自然な数式画像だったよね。。 <a href="https://qiita.com/yoya/items/510043d836c9f2f0fe2f"> qiita.com/yoya/items/510... </a> </p> <a href="https://twitter.com/yoya/status/1613439176749486080">午後 4:32 2023年1月12日</a> </blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

明らかに以前より数式の表示が崩れています。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"> ちなみに以前はこう。。 </p> <a href="https://twitter.com/yoya/status/1613450057046691840">午後 5:17 2023年1月12日</a> </blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# MathJax Math Renderer (クライアント側での回避策)

(クライアント側) MathJax 設定で問題を回避可能です。右クリックで設定できます。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"> Math Settings > Math Renderer の設定を HTML-CSS かfら Common HTML に切り替えたら、以前の表示に戻りました。٩( ᐛ )و </p> <a href="https://twitter.com/yoya/status/1613725816957046784">午前 11:33 2023年1月13日</a> </blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ただ、回避はできますが、クライアント側の対処だと、影響をうける閲覧ユーザ皆の手間がかかりますし、<del> Chrome を更新(108→109)するとまた設定が戻ったりして、</del>その度にやり直すのも面倒です。
<ins> Chrome 更新せずとも再起動だけで設定がデフォルトに戻るようです。ページを開き直す分には設定を持続します。(2023/1/28)</ins>

# MathJax Config (サーバ側での回避策)

マニュアルを見た感じ、サーバ側で頑張れば JavaScript で MathJax 設定して回避できそうです。
そもそも macOS Chrome 側の問題っぽい(後述する issue の話)ので根本対処でなく、あくまで一時的な回避です。

不具合の出る条件を絞り込み、その環境でのみサーバ側で以下の制御を行えば、ユーザ側の手間をかけず対処可能なはずです。

- https://docs.mathjax.org/en/v2.7-latest/options/index.html

```js:
MathJax.Hub.Config({
  showProcessingMessages: false,
  jax: ["input/TeX", "output/HTML-CSS"],
  TeX: {
    TagSide: "left",
    Macros: {
      RR: '{\\bf R}',
      bold: ['{\\bf #1}',1]
    }
  }
});
```

例えば、Common HTML に切り替えたい場合は、以下のようにできます。（試してないので多分でしかないです)

- https://docs.mathjax.org/en/v2.7-latest/options/output-processors/CommonHTML.html

```js:
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
   - https://github.com/mathjax/MathJax/issues/2988

雑にまとめると

- macOS Chrome の HTML-CSS 表示で崩れる
- STIXGeneral、 STIXNonUnicode フォントに関わる問題
- Chrome の macOS フォント検索の仕方に問題がありそう(？)
- HTML-CSS は最も古い設定だが最も壊れやすく、デフォルトから変える提案はなされているが、他項目も完璧ではないので今のまま

# まとめ

- macOS Ventura だと Chrome 108 あたりから Qiita の数式が崩れて見える
- MathJaxの MathML Renderer を変更する事で回避可能。クライアント側でもサーバ側でも変更可。
- 特定バージョンの macOS + Chrome で問題がある事は MathJax 開発側でも認識されている。