Normalize.css: iOS placeholder line-height with some fonts

Created on 28 Mar 2018 · 4Comments · Source: necolas/normalize.css

On iOS 10, with certain fonts, the vertical alignment of input placeholders is broken because of a strict line-height defined in normalize.css.
https://github.com/necolas/normalize.css/blob/7369f566898b8cefc2649b6a66e112857de4c46f/normalize.css#L159

In my particular case I have a font Galano Grotesque Alt, and here is how my input looks on iOS:

If I change the line-height to normal, iOS fixes the layout:

I can’t make an interactive example because the font is not freely available.

This only happens with the placeholder, only on iOS, only with this font in my case. If I start typing in, it aligns correctly:

A general problem with vertical alignment of the placeholder in iOS seems to be prevalent. A web search finds numerous relevant questions on Stack Overflow.

The line-height change was introduced in #607 and is nicely explained in a comment on #591.

I don’t suggest to change that line-height right now. The interaction is obscure, and there seems to be value in the value of line-height as is. I want to preserve this research in case anyone else stumbles in a similar scenario and searches the issue tracker for the issue. So feel free to close this immediately as inactionable, or keep open if you want to ponder more about it.

Source

denis-sokolov

👍13

Most helpful comment

For whatever reason, I needed:

::placeholder {
  line-height: normal !important;
  vertical-align: middle;
}

gmhenderson on 12 May 2020

🎉4

All 4 comments

@denis-sokolov The following could fix your problem 👍

::placeholder {
    line-height: normal;
}

aron-tw on 22 Mar 2019

👎3 👍3

input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder {
  line-height: normal !important;
}

trylovetom on 18 Jul 2019

👍3

For whatever reason, I needed:

::placeholder {
  line-height: normal !important;
  vertical-align: middle;
}

gmhenderson on 12 May 2020

🎉4

I had the same problem and I fixed with

input {
  -webkit-appearance: none;
  border-radius: 0;
 :focus {
    outline: none;
    border-radius: 0;
  }
  :active {
    border-radius: 0;
  }
}

Note1: I probably don't need active and focus but I add just in case.

Note2: If the font size is smaller than 16px you might have some zoom issues.
Check out this article for more info: https://thingsthemselves.com/no-input-zoom-in-safari-on-iphone-the-pixel-perfect-way/