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

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

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

くだくら
げ

サンプルページも作りましたので、以下のページを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自体のバグであると思います。
スマートフォン関係のバグは他にもいくつかありますが、できるだけバグ回避のためのコードが入らないスマートな解決をしたいですね。