Mobile Safariで最後の１文字が改行されてしまうバグ

スマートフォンブラウザ関係のバグは（Android browserを中心に）たくさんありますが、今回はかなりレアケースなバグの話と回避方法についてです。

タイトルどおり、iPhone/iPadのmobile safariやWebViewで日本語文字列の最後の１文字が不自然に改行されて表示されてしまうバグなのです。
どういうことかというと↓下のように表示されるということです。

くだくら
げ

サンプルページも作りましたので、以下のページをiPhone, iPadで表示してみてください。
Sample: http://kudakurage.com/test/mobile_safari_line_break/

発生条件

発生条件は少し複雑なため、そんなに遭遇することはありません。
（ただその分googleで検索しても、遭遇した例など出てきません）

mobile safariで閲覧している
- PCブラウザでは発生しません
バグが発生する要素の文字列の前後に空白文字（改行・半角スペースなど）がある
バグが発生する要素の文字列がすべて全角文字で構成されている
- 前後の空白文字を除く
バグが発生する要素のstyleにfloatが指定されている
特定のfont-sizeになっている
- 文字列の長さによって発生するfont-sizeの条件は異なる
- font-size:15pxの場合は高確率で発生する

発生例

<body>
  <div>
    くだくらげ
  </div>
</body>

body {font-size: 15px}
div {float: left}

くだくら
げ

詳細な発生条件

前述しましたが、文字列の長さによって発生するfont-sizeの条件は異なります。
検証してみた限りで以下の組み合わせで発生しました。

※6~40px, 1~20文字列で検証してます

font-size	string length
10, 20px	6文字
15, 29, 30, 31px	2 ~ 20文字
19, 38px	13文字

↓すべて全角数文字列で`format-detection telephone=no`の指定がない数文字列リンクの場合

font-size	string length
9, 18px	7, 14文字
15, 30px	17文字
21px	12文字
23px	11文字

対処方法

対処方法としては、可能な限り「前後の空白文字を削除する」というのが良いと思います。

どうしてもそれができないという場合は以下の様なCSSでも回避することはできますが。。。

div {
  margin-right: -1px; // :after要素のmarginのカウンター
}
div:after {
  content: ''; // 空要素を追加
  margin-right: 1px; // marginを指定することで改行を回避
  float: right; // PC browserで表示する際にheightのsizeが大きくなってしまうので、floatで回避
}

原因はよくわからないですが、mobile safari自体のバグであると思います。
スマートフォン関係のバグは他にもいくつかありますが、できるだけバグ回避のためのコードが入らないスマートな解決をしたいですね。