iOSだとHiragino+outlineでinputの文字が正しく表示されない

iOSはHiragino+outlineで正しく表示されない

iOSはinputにCSSでヒラギノ角ゴのフォントとoutline:noneが指定されていると文字の下部分が一部見えなくなって正しく表示されない。

このような症状になったらoutline:noneの指定を削除すると解決する。

.t {
  outline: none; /* ここを削除 */
  font-family: Hiragino Kaku Gothic;
  font-size: 20px;
}

また、value属性であらかじめ文字が入っている場合は影響はない。自分で直接入力しているときのみ発生するようだ。

iOSブラウザで調べてみよう

value値なし

value値あり

文字を入力後、下部が切れても一度フォーカスをはずしてからもう一度フォーカスすると下部が表示される。

また、フォントサイズによっては切れないこともある。