Input text height is broken in safari

Question

I am looking to create a text input where the text fills up the whole input field vertically. As illustrated in the image below:

This works all fine in Firefox and Chrome.

In Safari I am seeing this problem:

It seems like the line-height is not applied properly for the input field. Funny enough it is applied correctly for the placeholder.

My code:

Html:

<input type="text" placeholder="ABCD" value="ABCD">

Css:

input {
  padding: 0;
  margin: 0;
  border: 0 none;
  height: 140px;
  line-height: 140px;
  width: 600px;
  font-size: 185px;
}

You can test my code with this link: https://jsfiddle.net/0xsven/16z9Lr6t/

Is this a bug or am I missing something?

Edit: I am on Mac OS with Safari 10.0.2

Answer 1

This is my solution:

<div class="text-box">
<input type="text" placeholder="ABCD" value="">
</div>
<div class="text-box">
<input type="text" placeholder="ABCD" value="ABCD">
</div>

CSS

.text-box input {
  padding: 0;
  margin: 0;
  border: 0 none;
  background: none;
  font-size: 185px;
  position: relative;
  top: -47px;
}

.text-box {
  background:#fff;
  height: 140px;
  width: 600px;
  overflow: hidden;
}

Live jsFiddle - https://jsfiddle.net/16z9Lr6t/3/