Floating labels: Artificial label background clashing with autofill / per-field styling

[Bouke]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I have a sign-in form with a floating label, like this:

When I use Safari Autofill (password manager), Safari applies a custom background to let the user know the field was filled in by the browser:

The CSS that is applied on the input is the following:

input:autofill, input:-webkit-autofill-strong-password, input:-webkit-autofill-strong-password-viewable, input:-webkit-autofill-and-obscured {
  background-color: rgb(250, 255, 189);
  background-image: none;
  color: rgb(0, 0, 0);
}

Disabling the artificial background fixes the field's rendering:

The artificial was introduced in #37125. It seems the fix was applied rather broadly on all input elements, rather than the element for which the issue was reported (textarea). Is an input even susceptible to the reported bug?

Reduced test cases

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com" style="background:rgb(250, 255, 189)">
  <label for="floatingInput">Email address</label>
</div>

This is the outcome on v5.3.3 is different from 5.2.2 that I've shown above, but I think is still not looking great:

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Safari

What version of Bootstrap are you using?

v5.3.3

[julien-deramond]

Thanks for reporting an issue @Bouke

We merged recently #39720 that fixes this issue. It will be available in the v5.3.4.

You can check this out at https://codepen.io/julien-deramond/pen/GRaxKVJ where the new rendering with Safari is: