labels in form-floating do not show properly in microsoft edge

[anonimo345423]

Prerequisites

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

Describe the issue

i saw there was another issue like this one, but it was closed and not solved, so i'm here to provide a solution

Form floating input label conflicting with the placeholder as follows:

i also have a solution for that, but i do not know where to provide it so im gonna write it here:

all the .form-floating in the css file has to be substitued with:

@supports not (-ms-ime-align:auto) {
 .form-floating{position:relative}.form-floating>.form-control,.form-floating>.form-select{height:calc(3.5rem + 2px);line-height:1.25}.form-floating>label{position:absolute;top:0;left:0;height:100%;padding:1rem .75rem;pointer-events:none;border:1px solid transparent;transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}@media (prefers-reduced-motion:reduce){.form-floating>label{transition:none}}.form-floating>.form-control{padding:1rem .75rem}.form-floating>.form-control::-moz-placeholder{color:transparent}.form-floating>.form-control::placeholder{color:transparent}.form-floating>.form-control:not(:-moz-placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control:-webkit-autofill{padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-select{padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control:not(:-moz-placeholder-shown)~label{opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-select~label{opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control:-webkit-autofill~label{opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem)}
 }
 @supports (-ms-ime-align:auto) {
.form-floating>label{display:none !important;}
 }

sorry if i did something wrong but i'm new to github world, i tried to read everything but i didn't know how to make a pull request

Reduced test cases

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Email address</label>
</div>

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

Windows

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

Microsoft Edge

What version of Bootstrap are you using?

5.0.2

[mdo]

What version of Microsoft Edge? And can you update to v5.2.0?

[louismaximepiton]

I can't reproduce it neither on v5.0.2 nor in v5.2.0 🤷

[mdo]

Closing as not reproducible.