Google Chrome input text is cut off. Is it font issue or browser?

Question

Please take a look at this page http://s.codepen.io/nfxpnk/debug/akLbwG

As you can see at the first block with pink background, input with value "ÄÄÖÖÜÜ" doesn't have dots on the top.

And that behavior is only then height property on input tag is set.

Is it font issue or google chrome browser bug?

Unfortunately i can't remove height property on my project from all input fields.

How to fix this issue?

PS. Firefox and IE doesn't have this bug.

Thanks.

Answer 1

Change height to min-height

font-family: 'adihausregular',Arial,Helvetica,Verdana,sans-serif;
font-size: 40px;
min-height: 60px;
line-height: 54px;
width: 100%;

It seems that if you want you can also add max-height: 60px; and it still works.