Выравнивание по вертикали placeholder у input в Safari и Chrome — как сделать единым?

Question

[Денис Букреев]

Такие дела.
У input стили:

width: 320px;
height: 72px;
font-size: 18px;
color: white;
background: transparent;
border: 2px solid alpha(white, 50%);
padding: 23px 20px;
transition: 0.1s ease-out;

В Chrome отображается так:


В Safari уже криво:


В сафари кегль у шрифта почему-то имеет снизу отступ больше, чем сверху. При установке меньшего line-height высота остается такой же, но текст уезжает вверх с обрезанием.
Если выровнять в сафари - будет криво в хром. И наоборот.

Как выйти из положения?

Comments

[Денис Букреев]

Николай Петюх: клиент говорит, что не вариант
без подсветки элемента глаз на самом деле режет смещение текста вверх

Answer 1

[Serj-One]

input{
	height: 72px;
	line-height: 72px; // вычти 4px на бордер
	padding: 0 20px;
}

Центрировать текст в инпутах нужно через line-height а не padding.

Comments

[Денис Букреев]

все равно немного криво, но глазу не заметно. + каретка стала во всю высоту. Но это уже проблемесы клиента. Спасибо

Странно, что только placeholder криво отображается в такой ситуации. Если вводить текст - все в порядке становится

Answer 2

[Сергей Тутуков]

Хочу заметить, что отступы рендерятся по разному.
blogs.adobe.com/webplatform/2014/08/13/one-weird-t...

Если проверить: codepen.io/STutukov/pen/egPWxv и посмотреть высоту контейнера, то
chorme: height = 42px;
firefox: height = 43px;
explorer (древний): height = 43px;

Comments

[Денис Букреев]

И это очень неприятный момент