bug: browser autofill background color overlaps label in md mode

[abennouna]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
Starting from 4.3.0, autofilled inputs overlap their floating labels in MD mode.

Expected behavior:
As for non-autofilled inputs, floating labels must stay entirely visible.

Steps to reproduce:
An ion-item containing a floating ion-label and an ion-input that is auto-fillable and auto-filled.

Related code:
N/A

Other information:
Ionic Screenshots
MD

iOS

MD implementation Screenshots
Chrome

Safari

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (~/.nvm/versions/node/v10.12.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.3.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.3.8
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.1

System:

   NodeJS : v10.12.0 (~/.nvm/versions/node/v10.12.0/bin/node)
   npm    : 6.4.1
   OS     : macOS Mojave

[EricKit]

I have this issue with an ion-label and ion-input with the label set to stacked that is not auto-filled.

[mebibou]

Yes this issue also appears on position="stacked". It seems the style

.native-input.sc-ion-input-md:-webkit-autofill {
    background-color: transparent;
}

gets overridden. Could we get a fix asap for this?

This is on 4.9.0

[jaipresto]

Until Ionic sort this (if they can; it's deeply-rooted and seems to be browser-specific), a hack is to use a combination of height and box-shadow. Height prevents it covering the label, and a box-shadow to change the color.

So an example using code from @mebibou:

.native-input.sc-ion-input-md:-webkit-autofill {
    height: 0px;
    box-shadow: 0 0 0 10px #ebe6ff inset;
}

or something more general, as per these answers:

input:-webkit-autofill {
    height: 0px;
    -webkit-box-shadow:0 0 0 10px white inset;
    -webkit-text-fill-color: black;
    font-weight: 500px;
}

input:-webkit-autofill:focus {
    height: 0px;
    -webkit-box-shadow: 0 0 0 10px white inset;
    -webkit-text-fill-color: black;
    font-weight: 500px;
} 

Just change the color of the box-shadow property to anything you want, and ensure you add the inset value. You can also do other stuff like change the font-family, add a transform, and even do some animation.

Of course the box-shadow doesn't get rid of the default browser css, it just sits on top.

[bitflower]

I have had this for a long time but finally found the time to contribute just to find this issue ;-)

ionic@5.4.1.

[dylanvdmerwe]

Note that this is still a thing. @ionic/angular: 5.6.9

Autofill when used on a desktop browser looks shocking.

[DajuSar]

its 2021, 2 years from the last comment and this error still happens.