Floating labels always in floated state in 5.3.4 #41342

Activity

1. lonix1 commented on Apr 3, 2025

   

   lonix1

   on Apr 3, 2025

   Author

   More actions

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

   👍React with 👍1Reacted by FeKuLa
2. julien-deramond commented on Apr 4, 2025

   

   julien-deramond

   on Apr 4, 2025

   Last edited by julien-deramond

   Member

   More actions

   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.

   👍React with 👍2Reacted by lonix1 and FeKuLa
3. julien-deramond

   added the

   Bug

   issue type on Apr 4, 2025
4. julien-deramond

   added

   confirmedReproduced with a reduced test caseReproduced with a reduced test case

   v5v5, the v5-dev branchv5, the v5-dev branch

   on Apr 4, 2025
5. FeKuLa commented on Apr 4, 2025

   

   FeKuLa

   on Apr 4, 2025

   More actions

   Any quick way to fix this before the next release?
   Thanks
6. julien-deramond

   added

   has-prAn open pull request addresses itAn open pull request addresses it

   on Apr 4, 2025
7. mdo

   added this to v5.3.5on Apr 4, 2025
8. github-project-automation

   moved this to To do in v5.3.5on Apr 4, 2025
9. mdo commented on Apr 4, 2025

   

   mdo

   on Apr 4, 2025

   Last edited by mdo

   Member

   More actions

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

    moved this from To do to Needs review in v5.3.5on Apr 4, 2025
11. mdo

    closed this as completedin #41347on Apr 4, 2025
12. github-project-automation

    moved this from Needs review to Done in v5.3.5on Apr 4, 2025
13. lonix1 commented on Apr 5, 2025

    

    lonix1

    on Apr 5, 2025

    Author

    More actions

    Works for me in Firefox latest... thanks!