- This topic is empty.
February 24, 2016 at 7:38 am #238380
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.
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.February 24, 2016 at 8:14 am #238383bearheadParticipant
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-heightto 1.8rem or 18px (so it matches the placeholder font) for the input fixes the jumping.February 24, 2016 at 9:50 am #238386
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-topto account for the alignment.February 24, 2016 at 11:33 am #238388bearheadParticipant
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.February 24, 2016 at 12:57 pm #238390ShikkedielParticipant
I see the jump with Chrome on Windows 7 as well. Using padding instead seems worth a try.February 25, 2016 at 4:23 am #238425
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.
- The forum ‘CSS’ is closed to new topics and replies.