前にこの現象が起きた時にいろいろ試してみて解決したんですが、少し前にその対処法をド忘れしてまた同じことで頭を悩ませたので忘れないようにメモ。
iPhoneである特定のフォントサイズの時に右側に謎の余白ができることがあり自分なりに検証してみたところ、この現象はフォントサイズだけが関係しているわけではないらしく、どうやらマルチバイト文字の時で特定のフォントサイズの際に起きる現象のようです。
また、Androidの実機で確認してみましたがこの現象は起きておらず、iPhoneではSafariだけでなくSleipnirやiLunascapeなどの他ブラウザでも起きていたので、iOSが原因なのかなと考えています。
対処法
いろいろと調べたり検証した結果、この現象はCSSにletter-spacing: -0.01px
を追記することでひとまず対処できました。
element {
letter-spacing: -0.01px;
}
-0.1px
や-0.01em
などでもこの現象は消えましたが数値の指定が0
の時では駄目だったので、記述の際にマイナスの数値を指定する必要があるようです。
対処法ということで書きましたが、正直この現象が起きる具体的な原因はわからずにいるので、もし具体的な原因などご存知の方がいたらコメントなど通じて教えてもらえると嬉しいです。