Fix For Input's Default Background Color Not Working

Expected behavior

The background color for saved values in inputs does not offset the MDB label. This fix is said to work but it does not for me. https://mdbootstrap.com/docs/angular/forms/inputs/

Actual behavior

The background color for saved input values offsets the label on mdbInputs and centers it above the background color it gives. The labels for the mdbInput are out of line when a default value is put into the input on the browser.

I have the fix at the bottom of this doc in my styles.scss but it does not work on my website https://mdbootstrap.com/docs/angular/forms/inputs/

Resources (screenshots, code snippets etc.)

If you go to https://tragoa.com and then you click on "Sign In With Username/Email" the modal will pop open and any default values in the input look like the image.

In my styles.scss I have this:

    @-webkit-keyframes autofill {
    to {
      color: #666;
      background: transparent;
    }
  }

@keyframes autofill {
  to {
    color: #666;
    background: transparent;
   }
  }

  input:-webkit-autofill {
  -webkit-animation-name: autofill;
  animation-name: autofill;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.md-form > input[type]:-webkit-autofill:not(.browser-default):not([type='search']) + label {
  transform: translateY(-14px);
}

My input HTML looks like this:

<form *ngIf="!loggedIn()" #loginForm="ngForm" class="form-inline waves-light ml-auto" (ngSubmit)="loginModalForm()">
                    <div class="md-form w-100">
                        <i class="fa fa-envelope prefix grey-text d-none d-sm-block"></i>
                        <input [mdbValidate]="false" maxlength="30" type="text" id="Form-username" name="username" class="form-control" mdbInput [(ngModel)]="model.username">
                        <label for="Form-username">Username or Email</label>
                    </div>
                    <div class="md-form w-100">
                        <i class="fa fa-lock prefix grey-text d-none d-sm-block"></i>
                        <input [mdbValidate]="false" maxlength="60" type="password" id="Form-pass1" name="password" class="form-control" mdbInput [(ngModel)]="model.password">
                        <label for="Form-pass1">Password</label>
                    </div>
                    <button mdbBtn color="default" class="waves-light w-100" [disabled]="!loginForm.valid" (click)="$event.stopPropagation()" (click)="logInModal.hide()" mdbWavesEffect>Login</button>
                </form>

I think it happens on non-modal inputs also but note this is on a modal.

Is there anything you see that's wrong?