Placeholder jumps on input:focus

[grimski]

I’ve never noticed this before but on this design I’m working on the placeholder text jumps when the input is in focus. I think I’ve found out why but it would be good if anyone can think of a solution.

It looks like it occurs when the line-height is greater than the height of the input. Which I’ve had to do to centre the text.

I’ve created a CodePen showing the issue. Note I had to exaggerate the line-heightin this example. On my site it’s only height: 30px; line-height: 32px; …line-height: 31px, 1px greater causes the issue on what I’m working on.

http://codepen.io/anon/pen/eJqoOq

I”m using the Myriad Pro web font, which (reading some threads searched for on Google) seems to have some line-height issues which is why I think it’s worse with that font in particular. As alignment seems to differ between OSX and Windows.

[bearhead]

I think the root of the issue is that the placeholder font-size is larger than the input text font size. It seems like setting line-height to 1.8rem or 18px (so it matches the placeholder font) for the input fixes the jumping.

[grimski]

Thanks for the reply, that stops the text from jumping but unfortunately the text isn’t centralised.

Maybe I’ll just have to do this though and add padding-top to account for the alignment.

[bearhead]

What browser are you using? I tested it in IE11, chrome and FF and the text seems like it’s in the middle.

The only issue I saw in IE and FF is that the placeholder font is not a different size.

[Shikkediel]

I see the jump with Chrome on Windows 7 as well. Using padding instead seems worth a try.

[grimski]

After using Myriad Pro Condensed from TypeKit the issue looks like it’s been resolved. Due to the fact I can now set a lower line-height.

For some reason the generated version I used from fonts on my computer added some nutty line-heights which differed from OSX to Windows. Weird.

[Author]

Posts