sKawashimaです。
当ブログの一部の記事において、iOS端末で表示した場合にのみ文章内に豆腐（文字化け文字）が発生するバグを発見し、2019年7月7日に修正しました。
いつも当ブログを読んでいただいている方にはありがとうございます、そして今までご迷惑をおかけしました。
ただ、この文字化けはいわゆる文字コード指定によるものではありません。
その豆腐の発生条件が少々特殊であり、未だ完全な解決に至っていないためこうして記事を執筆します。
もし何か分かりましたら、こちらまで情報をいただけるとありがたいです。
とりあえず、条件は大体わかったのでこちらにもまとめてあります。
目次
iOSにのみ発生した豆腐の再現
ひとまず、豆腐を再現します。
iOS環境でのみ、↓に豆腐が発生しているはずです。
このブログサイトはhexoという静的サイトジェネレータで生成されています。
公開自体はとてもシンプルで、htmlとcssとjsを書き出してサーバーにアップロードするというものです。
PCで確認していただくと分かりますが、この豆腐の部分には文字や疑似要素が入っているわけではないので、単純な文字化けとは話が違うのです。
発生条件の整理
この豆腐はiOS端末でしか再現されません（ここは豆腐がない）。
しかし、strongやcodeなどのインライン要素に当たるタグを使っており、その中身の両端が半角文字かつ隣接する文字が半角文字でない場合にこのバグは発生します。
中身の両端が全角文字であれば隣接する文字が半角文字でない場合でも豆腐は発生しません。
中身の両端が半角文字でも隣接する文字が半角文字であれば豆腐は発生しません：abcdいーfghi
- また、list内ではこれらの条件に関わらず豆腐は発生しません。
原因の推測
まず、MacOS,Android,iOSの3環境で検証してこの事例を確認できたのがiOS端末のみであったため、これはiOSのOS単位のバグと考えています。
ただし、他のサイトではあまり発生していないように見えますね。
これについては、文字の揃え方に関する CSS の記述が影響していると考えています。
当ブログでは、とりあえず既知の条件は、 font-family が -apple-system に指定されている状態で text-align: justify; をかけるとこの問題が発生する、ということです。
現在このブログで行った対処
ひとまず、↑の法則がわかったので半角英数を使用する際は記事に半角空白を入れるという対処を取りました。
現状は対症療法であり、原因もわからない状態なので、詳しいことがわかる方は情報をいただけるとありがたいです。
これからも当ブログをよろしくおねがいします。それでは。