Yu Gothic UIで「」が重なって表示される

ChatGPTで調べ物をしていた際、「A」「B」のように「」を続けて入力すると 」「 部分が重なって表示される現象に遭遇したので、原因について調べてみました。
確認環境はWindowsのchromeになります。

不具合内容

Windows環境のchromeでChatGPTを使用した際、「A」「B」「C」 と入力すると以下のように括弧部分が重なって表示されます。

調べてみるとフォントはsystem-ui(Yu Gothic UI)が適用されているようだったので、現象が再現できるか試してみます。

<p>「A」「B」「C」</p>
<p class="yu-gothic-ui">「A」「B」「C」</p>

.yu-gothic-ui {
	font-family: Yu Gothic UI;
}

試してみたところ、現象を再現することができました。
Yu Gothic UIで「」が重なるデモページ

他の括弧のパターンもいくつか試してみます。

<p>「A」「B」「C」</p>
<p class="yu-gothic-ui">「A」「B」「C」</p>

<p>『A』『B』『C』</p>
<p class="yu-gothic-ui">『A』『B』『C』</p>

<p>【A】【B】【C】</p>
<p class="yu-gothic-ui">【A】【B】【C】</p>

<p>（A）（B）（C）</p>
<p class="yu-gothic-ui">（A）（B）（C）</p>

<p>＜A＞＜B＞＜C＞</p>
<p class="yu-gothic-ui">＜A＞＜B＞＜C＞</p>

<p>[A][B][C]</p>
<p class="yu-gothic-ui">[A][B][C]</p>

<p>(A)(B)(C)</p>
<p class="yu-gothic-ui">(A)(B)(C)</p>

上記の場合、「」『』【】は重なり、（）＜＞や半角括弧の場合は問題ないようでした。
括弧のパターンのデモページ

解消方法

調べたところ、2024年3月13日にリリースされたchrome 123で対応したtext-spacing-trimプロパティが影響しているようです。
text-spacing-trimは日本語や中国語、韓国語(CJK)の句読点文字の隣接する文字間(カーニング)などを制御できるプロパティで、初期値のnormalでYu Gothic UIを使用した際に重なってしまうようです。

text-spacing-trimの値をspace-all(すべてのCJK全角句読点を全角に設定)にしてみます。

.yu-gothic-ui {
	font-family: Yu Gothic UI;
	text-spacing-trim: space-all;
}

これで括弧を重ならないようにすることができました。
text-spacing-trim: space-allを設定するデモページ

記事作成時点でtext-spacing-trimに対応しているブラウザはchromeとedgeで、重なる不具合とspace-allで回避できることを確認できました。
text-spacing-trimに対応していないFirefoxでは重なる不具合も発生していませんでした。