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値あり
文字を入力後、下部が切れても一度フォーカスをはずしてからもう一度フォーカスすると下部が表示される。
また、フォントサイズによっては切れないこともある。