Floating labels always in floated state in 5.3.4

[lonix1]

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

Thanks for the latest version 5.3.4.

There were changes to floating labels, and I think it's impacted existing behaviour.

Consider the docs pages for the latest and previous versions. The floating label used to have two states: "unfloated" and "floated". Now it's always in the "floated" state.

If this is an intentional change, so be it. Just wanted to highlight this change in case it's a bug.

Reduced test cases

See docs pages linked above

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

Linux

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

Firefox

What version of Bootstrap are you using?

5.3.4

[lonix1]

I jut tried in Edge and it seems to work as expected. So it could be a bug after all, but just for Firefox.

[julien-deramond]

Thanks a lot for reporting this issue, @lonix1!

I can confirm the rendering issue on Firefox 137.0 running on macOS 15.3.2.

The problem appears to have been introduced in commit 0a56558 which includes a dependencies bump.

I haven’t had time to do a deep dive yet, but here’s a rough initial analysis:

When comparing the generated bootstrap.css between the problematic commit and the one immediately prior, I noticed some key differences related to Firefox-specific placeholder selectors:

(the colors in the diff are inverted but :placeholder-shown is replaced with :-moz-placeholder -> green = 5.3.3 and red = 5.3.4)

diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
index 8855419e8..4776ae2ca 100644
--- a/dist/css/bootstrap.css
+++ b/dist/css/bootstrap.css
@@ -2636,7 +2636,7 @@ textarea.form-control-lg {
 .form-floating > .form-control-plaintext::placeholder {
   color: transparent;
 }
-.form-floating > .form-control:not(:-moz-placeholder), .form-floating > .form-control-plaintext:not(:-moz-placeholder) {
+.form-floating > .form-control:not(:-moz-placeholder-shown), .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) {
   padding-top: 1.625rem;
   padding-bottom: 0.625rem;
 }
@@ -2656,7 +2656,7 @@ textarea.form-control-lg {
   padding-bottom: 0.625rem;
   padding-left: 0.75rem;
 }
-.form-floating > .form-control:not(:-moz-placeholder) ~ label {
+.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
   transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
 }
 .form-floating > .form-control:focus ~ label,
@@ -2668,7 +2668,7 @@ textarea.form-control-lg {
 .form-floating > .form-control:-webkit-autofill ~ label {
   transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
 }
-.form-floating > textarea:not(:-moz-placeholder) ~ label::after {
+.form-floating > textarea:not(:-moz-placeholder-shown) ~ label::after {
   position: absolute;
   inset: 1rem 0.375rem;
   z-index: -1;

These differences suggest that the rendering issue is specific to Firefox and likely tied to how the placeholder selectors are being handled post-dependency update.

This might be related to the following issue in Autoprefixer: postcss/autoprefixer#1533

Will investigate further when time allows, but hopefully this provides a useful starting point.

[FeKuLa]

Any quick way to fix this before the next release?
Thanks

[mdo]

@lonix1 @FeKuLa If you're on Linux, mind checking the preview deploy in #41347? We can get a fix out today.

[lonix1]

Works for me in Firefox latest... thanks!