Android 標準ブラウザなどで code 要素など一部の要素が間延びする問題
Android ブラウザでページを表示すると、 code 要素などの一部の要素が間延びして、余白ができる問題があります。 このとき、この余白は margin や padding 要素に依存しません。 この問題が起きる条件は複雑ですが、おおむね次のようになっているようです。
(1)特定のブラウザ、(2)指定したフォントの種類、(3)text-rendering オプション、の3つが悪い形で作用する場合にこの問題が確認できました。
text-rendering: optimizeLegibility はフォントのカーニングを自動調整するためのプロパティとオプションです。
カーニングとは、フォント間の間隔を調整することです。
問題の調査
技術的解説を端折ると、フォントがカーニングに対応していない場合、Android のブラウザで不具合が起きるということになります。 今回この現象を確認したのは、Android 4.2 にプリインストールされているブラウザです。他に同 Android バージョン上で動作させた Chrome などでも検証しましたが、この問題は起こりませんでした。他に、次のようなことが確認できています。
- p 要素に含まれ、特定のフォントを指定した code 要素などに発生する問題である。
- フローコンテンツとして他に隣接するテキストのない、独立した要素にはこの問題は起きない。
極めて特異な現象であることは間違いありませんが、text-rendering オプションが普及してきた後は、
組み合わさるフォントの種類の多さと相まって、このような問題が多発するかもしれませんね。