bug: browser autofill background color overlaps input label

[legendar]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

In v7.1.3 auto-filled inputs still overlap their floating labels. The original issue was closed by BOT: #18141 but it still is not fixed in 7.x

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.

Code Reproduction URL

https://github.com/legendar/ion-input-label-issue

Ionic Info

$ ionic info

Ionic:

Ionic CLI : 7.1.1 (/home/****/.config/yarn/global/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.1.3

Capacitor:

Capacitor CLI : 4.7.3
@capacitor/android : 4.7.3
@capacitor/core : 4.7.3
@capacitor/ios : 4.7.3

Utility:

cordova-res : not installed globally
native-run : 1.7.2

System:

NodeJS : v18.15.0 (/home/****/.nvm/versions/node/v18.15.0/bin/node)
npm : 9.5.0
OS : Linux 5.10

Additional Information

possible workaround:

 .label-text-wrapper {
    z-index: 2;
  }

  .label-text-wrapper {
    transform: translateY(50%) scale(0.75) translateY(14px) !important;
    padding: 0 2px !important;
  }

  input {
    min-height: 50px;
    padding: 14px 2px 0 !important;
  }

[liamdebeasi]

Thanks for the report. What platform/browser are you testing this on? I am testing this on macOS with Brave, and the label is on top of the autofill background:

[legendar]

Looks like it is working fine on the Dark theme. But still reproduced on a Light theme:

The light mode can be emulated via dev tools as described here: https://stackoverflow.com/a/61541260

[liamdebeasi]

Thanks, I can reproduce this. Here is a dev build with a proposed fix if you are interested in testing:

npm install @ionic/react@7.2.1-dev.11690464203.1b2b4419 @ionic/react-router@7.2.1-dev.11690464203.1b2b4419

[legendar]

Checked the fix on a real project and it works fine: