Chrome bug for autofill color and background on mobile

Question

I am experiencing a really odd bug which only appears in Chrome when it is viewed on an actual mobile device. In my checkout the default colors of the input fields are dark with white text (stylised to align with website brand). The autofill colors (white background and black text) all work normally on desktop regardless of browser, they also work correctly in the Safari browser on iOS.

Oddly, on Chrome on mobile devices only, no matter what CSS I use (including this method) the input field background color doesn't change and the text goes black.

This means that against the black input background the user can't see their information. To test this issue I used the linked method above (with red text instead of green). I even tried with and without the sinful !important, sadly to no avail.

CSS:

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid red!important;
  -webkit-text-fill-color: red!important;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

Example (Safari - name field autocompleted, surname field typed to show default state):

Example (Chrome - name field autocompleted, surname field typed to show default state):

What on earth is going here I'm so confused. As mentioned this only happens when viewing the site on mobile devices (iOS) in Chrome, if I view the site on Desktop in responsive view it behaves correctly in Chrome as well.

Any ideas? Known bug/behaviour?

Answer 1

I managed to solve it with a different approach:

  // Workaround to remove autofill color from inputs
  input, select {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-background-clip: text !important;
    background-clip:  text !important;
  }

This is working for Safari and Chrome on iOS and Chrome on android, as far as I have tested.