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