display: inline-block
やposition: absolute
で幅を明示的に指定していない場合、
かつ、内容が1行のテキストの場合、最後の1文字だけ落ちてしまうことがたまにあった。
だいたいiPhone Safariで困る現象だが、稀にMac Chrome や Safari でも発生する。
再現性が高くなく、原因がよくわからなかったのだが、
おそらく要素の幅が最適なサイズになっていないことで起こる模様。
下記でとりあえず解決した。
width: max-content;
max-content
という値を初めて見た。
定義は下記(デフォルトはauto
)
auto
: ブラウザにコンテンツ幅の計算を委ねる事を意味する指定max-content
: コンテンツエリア固有の望ましい幅です。
auto
とmax-content
はどう違うのかいまいちピンとこないけど、とりあえず解決としておく。