-webkit-autofill показывает горизонтальный прозрачный прямоугольник, когда высота ввода превышает определенную высоту

Question

Я создаю форму, используя: -webkit-autofill для решения некоторых проблем с Chrome автозаполнением

Однако, если я увеличу размер шрифта или отступы, и ввод будет выше чем, может быть, 32, я не уверен, переломный момент, он показывает прозрачный прямоугольник на заднем плане

Вот мой код и пример песочницы https://codesandbox.io/s/mutable-leaf-3c64d (я поставил поля для имени , firstName и электронная почта, которая, я думаю, может быть распространена, поэтому она воспроизводима). Спасибо

<div className="App">
  <h1>Hello CodeSandbox</h1>
  First Name (with problem, font size 16px)
  <input className="tall" name="firstName" />
  Name (with problem, font size 16px)
  <input className="tall" name="name" />
  Email (with problem, font size 36px)
  <input className="taller" name="email" />
  First Name (ok, font size 12)
  <input name="firstName" />
  Name (ok, font size 12)
  <input name="name" />
  Email (ok, font size 12)
  <input name="email" />
</div>

input {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  background: none;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 8px 20px 7px 20px;
  margin-bottom: 2px;
  font-size: 12px;
}

input.tall {
  font-size: 16px;
}

input.taller {
  font-size: 36px;
}

input:-webkit-autofill {
  -webkit-animation-delay: 1s; 
  -webkit-animation-name: autofill;
  -webkit-animation-fill-mode: both;
  -webkit-text-fill-color: white !important;
  -webkit-box-shadow: 0 0 0 1rem rgba(0, 0, 0, 0.75) inset !important;
  background-clip: content-box !important;
  box-sizing: border-box;
}