iOSで最後の1文字が改行される

iOSで文字列の最後の1文字だけ改行されてしまう不具合に遭遇したのでメモしておきます。
確認したiOSのバージョンは6.1.6です。

発生条件

調べてみると発生条件がいくつかあるみたいですが、今回遭遇した条件は以下になります。

• display: inline-block;を指定している
• font-size: 20px;を指定している
• 文字列が全て全角文字
• 文字列の前に空白(半角スペースやコード上の改行)がある

上記発生条件の3・4番目について、いくつかパターンを試してみました。

HTML

<!-- 文字列の前に半角スペースが入っていると発生 -->
<div class="sample"> やる気マンゴスチンです</div>
<!-- 半角スペースがない場合は発生しない -->
<div class="sample">やる気マンゴスチンです </div>
<div class="sample">
やる気マンゴスチンです
</div>
<div class="sample"> やる気マンゴスチン?です</div>
<div class="sample">やる気<br />
マンゴスチンです</div>

CSS

.sample {
	display: inline-block;
	font-size: 20px;
}

全角以外が文字列に含まれている場合や文字津の前に空白がない場合は発生しないようでした。
最後の1文字が改行されるデモページ
　

CSSや条件は先ほどと同じで、文字数によっての違いはあるのかを試してみました。

HTML

<div class="sample"> あい</div>
<br />
<div class="sample"> あいう</div>
<br />
<!-- ↓ここから最後の1文字が改行される↓ -->
<div class="sample"> あいうえ</div>
<br />
<div class="sample"> あいうえお</div>
<br />
<div class="sample"> あいうえおか</div>
<br />
<div class="sample"> あいうえおかき</div>
<br />
<div class="sample"> あいうえおかきく</div>
<br />
<div class="sample"> あいうえおかきくけ</div>
<br />
<div class="sample"> あいうえおかきくけこ</div>
<br />
<div class="sample"> あいうえおかきくけこさ</div>
<br />
<div class="sample"> あいうえおかきくけこさし</div>
<br />
<div class="sample"> あいうえおかきくけこさしす</div>
<br />
<div class="sample"> あいうえおかきくけこさしすせ</div>
<br />
<div class="sample"> あいうえおかきくけこさしすせそ</div>

4文字以上は全て最後の一文字が改行されていました。
最後の1文字が改行されるデモページ2
　

今回はコード上に改行が入っていたので、改行を外して対応しました。
　

【参考サイト】

• Mobile Safariで最後の１文字が改行されてしまうバグ – くらげだらけ