inline-blockの右側にゴミ文字が表示される（原因わからず）

表題の件、CSSでfont-familyに日本語のGoogle Fontsを指定したテキストを旧バージョンのiOSで表示した時に、特定のフォントのいくつかで発生することがわかり、原因がわからずお手上げだったので備忘録としてここに書きます。
現象はこのとおり。(iPhone X, iOS12.2, font-family: BIZ UDGothic）

ここで、先頭の青い矩形はinline-blockで内容は空です。矩形の右側に現れているバツ印の四角がゴミ文字で、「情」という文字に被さっています。下側の例は「情」の前に全角スペースを入れたものです。全角スペースの位置にバツ印が出てしまってます。

html

<p class="justify"><span class="ib"></span>情に棹させば流される。智に働けば角が立つ。</p>

css

.justify {
  text-align: justify;
}
.ib {
  display: inline-block;
  width: 2em;
  height: 1em;
  outline: 1px solid blue;
}

2022年6月現在Google Fontsに登録されている日本語sans-serif, serifフォント44種類で試した結果、発生する条件や特徴がわかってきました。

1. テキストのブロックにtext-align: justifyが設定されている。
2. テキストの折り返しがある。
3. １文字目が漢字や全角スペースなどで発生。１文字目が「かな」「カナ」の場合は発生しない。
4. 発生するフォントは下記CodePen参照。なお、Noto Sansでは発生しなかった。
5. 発生を確認できたiOSのバージョンは、v12.2, 13.2。v14.2や15.2では発生しなかった。（他のバージョンはこちらの環境にないため未確認）
6. v12.2で発生していても13.2では発生しなくなったフォントもあった。
7. バツ印が表示されている箇所を含めてコピペしてデータを確認したが、バツ印部分に制御文字など無かった。
8. フォントによってはバツ印の幅が狭かったり、別の潰れた図形だったりする。
   

再現テストに使ったコードはこちら： https://codepen.io/kaz_hashimoto/pen/NWYKRdE

現象が発生したフォント名は、上記コードのjavascript内の配列にコメントで記入してあります。