Chrome autofill overlapping floating label

Question

I implemented this form design which moves the label out of the input field with :valid.
The issue is that on page load, my browser fills in my saved credentials and the CSS rules under :valid are not taken into account.
When I click on a blank space or anywhere really on the page, it works.
I want it to work without the user having to make an action, JS would be an option if necessary. I already tried to fire up a click event, but it does not do anything, I have to click manually to execute the CSS below :valid.

.form-input-group input:valid~label {
  transform: translate(0, -200%);
}

.form-input-group input:valid {
  margin-top: 30px;
}

.form-input-group input:focus~label {
  transform: translate(0, -200%);
}

.form-input-group input:focus {
  outline: none;
  background: #ff4a56;
  color: white;
  margin-top: 30px;
}

.form-input-group label,
.form-input-group input {
  transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
}

.form-input-group {
  position: relative;
  padding: 10px 0;
}

.form-input-group:first-of-type {
  padding-top: 0;
}

.form-input-group:last-of-type {
  padding-bottom: 0;
}

.form-input-group label {
  transform-origin: left center;
  color: #ff4a56;
  font-weight: 100;
  letter-spacing: 0.01em;
  font-size: 17px;
  box-sizing: border-box;
  padding: 10px 15px;
  display: block;
  position: absolute;
  transform: translate(0, -100%);
  z-index: 2;
  pointer-events: none;
}

.form-input-group input {
  appearance: none;
  background-color: none;
  border: 1px solid #ff4a56;
  line-height: 0;
  font-size: 17px;
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 10px 15px;
  border-radius: 60px;
  color: #ff4a56;
  font-weight: 100;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
}

<form action="" method="get">
  <div class="form-input-group">
    <input type="text" required/>
    <label>First Name</label>
  </div>
  <div class="form-input-group">
    <input type="text" required/>
    <label>Last Name</label>
  </div>
  <div class="form-input-group">
    <input type="text" required/>
    <label>Email Address</label>
  </div>
  <div class="form-input-group">
    <input type="password" required/>
    <label>Email Confirm</label>
  </div>
</form>

Edit

Fun fact: even a huge site like reddit is victim to this chromium big brain decision.

Answer 1

It seems that this is unfixable because of the stubbornness of chromium decision makers, despite the seemingly general confusion and frustration of web devs since 2014 and other browsers behaving differently.

This is one of the many chromium bug tickets that were closed as WontFix.

Here are some others.

Edit

Via this article, I saw :-webkit-autofil and did some testing, and it seems to kind of work like I wanted. Let's just hope that it'll be working consistently over time.