HTML Input cursor position issue in Chrome when value is empty

Question

Just recently I have noticed out text inputs having a display issue in Google Chrome but only when the text is empty.

Notice how in the top image, when the input is

Answer 1

There is another hack that no one have mentioned as I can see. You could use a @media query to check out Chrome:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    line-height: normal;
}

Answer 2

I encountered the similar issue. But I found it's better to use number for line-height instead of length(px, em or rem). Maybe using following code fix this problem:

input[type="text"] {
  height: 46px;
  line-height: 1.1;
}

Plus, maybe the css above need to be paired with -webkit-appaearance: none for the desired rendering effect. Anyway, this works for me.