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