text-fill-color breaks horizontal scrolling in inputs

I'm trying to do an input with a gradient font color but when my text exceeds the input's width text won't scroll. When I remove the text-fill-color property it starts working, is there any workaround for this?

HTML:

<input class="input-1" type=text />
<input class="input-2" type=text />

CSS:

.input-1 {
  background: linear-gradient(to right, #FC00FF, #00DBDE);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2.5rem;
  font-weight: 700;
  font-style: italic;
  height: 3rem;
}

.input-2 {
  color: red;
  font-size: 2.5rem;
  font-weight: 700;
  font-style: italic;
  height: 3rem;
}

Here's a Codepen with a working example: Link