Chrome Autofill-Background bug

[ericrange]

trafficstars

What happened?

Latest chrome autofill makes darkmode ugly

What did you expect to happen?

should not be ugly

Reproduction URL

just turn darkmode on and add an q-input with password type

How to reproduce?

all default stuff

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

here is my suggestion (how we fixed it). would be nice if this would be default.

:deep(input:-webkit-autofill),
:deep(input:-webkit-autofill:hover),
:deep(input:-webkit-autofill:focus),
:deep(input:-webkit-autofill:active){
  background-clip: text;
  -webkit-text-fill-color: #fff;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: inset 0 0 9999px 9999px <defaultBackgroundColor>;
}

:deep(input:focus:-webkit-autofill),
:deep(input:focus:-webkit-autofill:hover),
:deep(input:focus:-webkit-autofill:focus),
:deep(input:focus:-webkit-autofill:active){
  background-clip: text;
  -webkit-text-fill-color: #fff;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: inset 0 0 9999px 9999px <defaultFocusBackgroundColor>;
}

Relevant log output

No response

Additional context

No response

[github-actions[bot]]

Hi @ericrange! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[ericrange]

its not a "perfect" solution. but it feels way more better than without the fix

:deep(.q-field--dark input:-webkit-autofill),
:deep(.q-field--dark input:-webkit-autofill:hover),
:deep(.q-field--dark input:-webkit-autofill:focus),
:deep(.q-field--dark input:-webkit-autofill:active) {
  background-clip: text;
  -webkit-text-fill-color: #fff;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: inset 0 0 9999px 9999px rgb(45 45 45);
}

:deep(.q-field--dark:hover input:-webkit-autofill),
:deep(.q-field--dark:hover input:-webkit-autofill:hover),
:deep(.q-field--dark:hover input:-webkit-autofill:focus),
:deep(.q-field--dark:hover input:-webkit-autofill:active) {
  background-clip: text;
  -webkit-text-fill-color: #fff;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: inset 0 0 9999px 9999px rgb(60 60 60);
  border-bottom: solid 1px transparent;
}

:deep(.q-field--dark.q-field--focused input:-webkit-autofill),
:deep(.q-field--dark.q-field--focused input:-webkit-autofill:hover),
:deep(.q-field--dark.q-field--focused input:-webkit-autofill:focus),
:deep(.q-field--dark.q-field--focused input:-webkit-autofill:active) {
  background-clip: text;
  -webkit-text-fill-color: #fff;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: inset 0 0 9999px 9999px rgb(66 66 66);
  border-bottom: solid 1px transparent;
}

there are still some transition bugs which need to be adapted.

[pdanpdan]

Please add a codepen with your solution

It looks like this is simpler and works:

https://pdanpdan.github.io/quasar-play/#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

[AmosSzust]

I have the same issue with Edge and light mode and also with the email field but the email is "fixed" when clicking inside the field or when going away and back to the tab.

Is it something that is going to be fixed?

[ericrange]

@AmosSzust i know this case. but my example fixes that ;) u just to need to adapt your colors

[AmosSzust]

I used @pdanpdan solution and it works, I was just wondering if it will be like that out of the box. Thanks.