Vertically center input placeholder in Chrome

Question

Any idea how to vertically center this input field placeholder on Chrome? The input and placeholder font sizes are purposely different. The input placeholder in Firefox and Safari appear vertically centered, but appears lower Chrome.

Here is a sample where you see the centering does not work on Chrome.

<input class="input" placeholder="vertical center"/>

.input {
    font-size: 14px;

    &::placeholder {
        font-size: 8px;
        text-align: left;
        color: green;

        // transform-origin: 0% 50%;
        // transform: translate3d(0, -2px, 0);
    }
}

Here is a codepen showing the issue: https://codepen.io/illusionfactory/pen/xxJZrYp?editors=1111

I tried answers from other posts, like transforms on the placeholder, but didn't seem to work.

The translate moves it but then the alignment is not good across all browsers. Any help is appreciated.

Answer 1

input {
  padding: 12px 2px;
  font-size: 19px;
}

input::-webkit-input-placeholder {
  color: green;
  font-size: 8px;
  position: relative;
  top: -4px;
}

<input placeholder="Vertical Center"/>