iOS placeholder line-height with some fonts

[denis-sokolov]

On iOS 10, with certain fonts, the vertical alignment of input placeholders is broken because of a strict line-height defined in normalize.css.

normalize.css/normalize.css

Line 159 in 7369f56

line-height: 1.15; /* 1 */

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.

[1aron]

@denis-sokolov The following could fix your problem 👍

::placeholder {
    line-height: normal;
}

[trylovetom]

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

[gmhenderson]

For whatever reason, I needed:

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

[Alfrex92]

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/