iPhoneで特定のフォントサイズでできる謎の余白の対処法

Tips

iPhoneで特定のフォントサイズでできる謎の余白の対処法

前にこの現象が起きた時にいろいろ試してみて解決したんですが、少し前にその対処法をド忘れしてまた同じことで頭を悩ませたので、忘れないようにメモ。

iPhoneである特定のフォントサイズの時に右側に謎の余白ができることがあり、自分なりに検証してみたところ、この現象はフォントサイズだけが関係しているわけではないらしく、どうやらマルチバイト文字の時で特定のフォントサイズの際に起きる現象のようです。
また、Androidの実機で確認してみましたがこの現象は起きておらず、iPhoneではSafariだけでなく、「Sleipnir」や「iLunascape」などの他のブラウザでも起きていたので、iOSが原因なのかなと考えています。

対処法

いろいろと調べたり検証した結果、この現象はCSSにletter-spacing: -0.01pxを追記することでひとまず対処できました。

CSS

p {
  letter-spacing: -0.01px;
}

-0.1px-0.01emなどでもこの現象は消えましたが、数値の指定が0の時では駄目だったので、記述の際にマイナスの数値を指定する必要があるようです。
対処法ということで書きましたが、正直この現象が起きる具体的な原因はわからずにいます...。
もし、ご存知の方がいたらコメントなど通じて教えてもらえると嬉しいです。

Close the search window,
please press close button or esc key.