css - 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 empty, the cursor is too high within the text input.

But once we type some text it corrects itself:

JSFiddle to illustrate. May require Google Chrome version: 38.0.2125.101 m

HTML:

<input name="tb_password" type="password" id="tb_password" class=" validate[required,custom[password]]" placeholder="Type your password here" autocomplete="off" style="
    margin: 0;
    line-height: 46px;
">

CSS:

input[type="text"], input[type="password"] {
width: 100%;
height: 46px;
line-height: 46px;
font-size: 11pt;
color: #555 !important;
text-indent: 15px;
border-top: solid 1px #c5c5c5;
border-left: solid 1px #c5c5c5;
border-bottom: solid 1px #dadada;
border-right: solid 1px #dadada;
background: #fff;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, .1);
box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, .1);
}

Answer 1

Cause:

Looks like this is a regression bug in the Chromium 38 engine. I can reproduce in Chrome 38.* and Opera 25.* (which uses Chromium 38).

Reported Bug/s:

As pointed out by @JackieChiles it appears to be a regression of this [closed as obselete] bug: https://code.google.com/p/chromium/issues/detail?id=47284

As suggested in the closed bug, I have logged a new one. https://code.google.com/p/chromium/issues/detail?id=426802&thanks=426802&ts=1414143535

And have also referenced another reported bug which appears to highlight the same bug, yet fails to define the exact issue in a generic way. https://code.google.com/p/chromium/issues/detail?id=394664

Workaround:

As detailed in other answers above the workaround is to avoid using a pixel-based line-height attribute. For example swapping line-height:50px to line-height:1em or line-height:100% will yield more expected behaviour.