Safari line-height bug

by Michelle Bu

HTML

<p>
  Try typing below in Safari; the text will touch the red line.
</p>

<input type="text" placeholder="Hello" />
<input type="text" placeholder="World" />

<p>
  (This happens with any line-height under 1.2em / 'normal'.)
</p>

CSS

input {
  font-size: 24px;
  line-height: 0.9em;
  height: 0.9em;
  border: none;
  border-bottom: 3px solid red;
  border-radius: none;
  background: transparent;
  width: 100px;
}

input:focus {
  background: white;
  outline: none;
}