1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

font-familyが-apple-systemに指定されている状態でtext-align: justify;をかけるとiOS端末にて豆腐(文字化け文字)が出現する

Last updated at Posted at 2019-07-08

元タイトル:【情報ください】WebページにてiOS端末にのみ豆腐(文字化け文字)が発生する現象に遭遇しました

タイトルの通りです。
文字コードはutf-8、HTMLや疑似要素に変な文字が入っているなんてことはありません。

発生条件の整理

この豆腐はiOS端末でしか再現されません。
しかし、strongやcodeなどのインライン要素に当たるタグを使っており、その中身の両端が半角文字かつ隣接する文字が半角文字でない場合にこのバグは発生します。

中身の両端が全角文字であれば隣接する文字が半角文字でない場合でも豆腐は発生しません。
中身の両端が半角文字でも隣接する文字が半角文字であれば豆腐は発生しません

また、list内ではこれらの条件に関わらず豆腐は発生しません。

原因の推測

まず、MacOS,Android,iOSの3環境で検証してこの事例を確認できたのがiOS端末のみであったため、これはiOSのOS単位のバグと考えています。
ただし、他のサイトではあまり発生していないように見えますね。
これはおそらく、文字の揃え方に関する CSS の記述が影響していると考えられます。

当ブログでは、本文に対して text-align: justify; 、つまりCSSによる両端揃えを適用しています。
他のそのようなサイトを確認したわけじゃないのでなんともですが、ひとまずそこが原因だと睨んでいます。

190709追記

@beffell さんのコメントを受けて確認した結果、 font-family-apple-systemに指定されている状態でtext-align: justify;をかけるとこの問題が発生することが確認できました。
情報ありがとうざいます。

情報ありがとうございました

自分が発見していたより明確な条件を絞り込むことが出来ました。
ありがとうございました。
引き続き、情報があると教えていただけると幸いです。

1
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?