Text input placeholders are broken in latest version of Chrome?

Question

Sorry I can't provide anymore information on the issue other than a screenshot, I've currently got no way to test on Windows with Chrome.

This is what the placeholders look like on Win7 Chrome:

Some relevant styles:

.field input, .field textarea {
  width: 100%;
}

input, textarea {
  background: #fbfbfb;
  padding: 15px;
}

input {
  line-height: normal;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
  border: none;
}

label, input {
  display: block;
}

HTML:

<div class="field">
    <input id="cf-name" type="text" name="name" value="" placeholder="Name" autocomplete="off">
</div>

The page is here:

http://dev.metertech.co.uk/contact-us

Anyone faced this issue and know what's going on?

Answer 1

You have set the line-height for the inputs to be normal , but if you look at your placeholder pseudo-classes, you set them to be line-height: 2 . So your placeholder text is trying to occupy more height than the actual height of your inputs, hence the "chopped off" placeholder text.

To fix it, remove the line-height property from the placeholders.

You probably also don't need line-height:normal - it is the default.

Answer 2

Here is your fix

input {
  line-height: 28px;
}