:placeholder-shown is replaced with -moz-placeholder, although this is outdated #1533

kliehm · 2025-03-20T10:21:01Z

Due to a change in autoprefixer in the last two weeks I assume, suddenly :placeholder-shown is replaced with :-moz-placeholder. According to caniuse, this should only be necessary in Firefox < 50, not in current versions.

Although as far as I understand, :-moz-placeholder should be a synonym to ::placeholder, i.e. to style the placeholder, whereas :placeholder-shown is an indicator if the placeholder is visible or not. So if the focus is within the input and the placeholder text disappears, :placeholder-shown is false. That's something different than styling the placeholder.

Our .browserslistrc looks like this, so Firefox < 50 should not be relevant:

> 1% in DE
last 2 versions
not dead

For the time being, I disabled replacement of :placeholder-shown with /* autoprefixer: ignore next */.

The text was updated successfully, but these errors were encountered:

ai · 2025-03-20T10:24:08Z

Can you show simple example of input CSS, output and expected output?

ai · 2025-03-20T10:24:29Z

cc @Marukome0743

ai · 2025-03-20T10:28:04Z

Although as far as I understand, :-moz-placeholder should be a synonym to ::placeholder, i.e. to style the placeholder, whereas :placeholder-shown is an indicator if the placeholder is visible or not

https://caniuse.com/?search=placeholder-shown says that :-moz-placeholder equals to :placeholder-shown.

Also, another argument is that :placeholder-shown and :-moz-placeholder both uses single : (which means it is a state, not [virtual] element).

But we may be wrong. Please show your proofs or arguments.

kliehm · 2025-03-20T10:48:07Z

https://caniuse.com/?search=placeholder-shown says that :-moz-placeholder equals to :placeholder-shown.

Yes, but that's only true for Firefox prior v50. Modern Firefoxes support :placeholder-shown.

Here is a minimal example: show the label only if the placeholder is visible:

HTML:
<input placeholder=" " /><label>Text</label>

CSS:
label { display: none };
input:not(:placeholder-shown) + label { display: block }

In retrospective, I could have achieved the same effect with :empty, but this is how we've done it. It worked until recently. With the replacement it doesn't work as expected anymore in current versions of Firefox:

input:not(:-moz-placeholder) + label { display: block }

I appreciate your great work, that's only a little annoyance. :)

ai · 2025-03-20T10:50:06Z

Oh, so you have a problem only with not()? It is important note.

Can you show current output and expected output (with prefixes)?

kliehm · 2025-03-20T11:31:03Z

Can you show simple example of input CSS, output and expected output?

Here it still works: the search field at the top has a label "what are you looking for" that disappears, when the input receives focus. Also the reset button (the x) only appears when there is text in the input.

https://verwaltung.bund.de/portal/EN

The negative case only appears on dev stages so far.

ai · 2025-03-20T11:33:11Z

I need to show a small isolated example, not the whole website. Sorry, debugging the huge part of code is hard (and it could be an issue in another part than Autoprefixer, maybe you rely on broken behavior).
I need current output and output that it is expected (so the 1 link doesn’t work).

kliehm · 2025-03-20T13:01:29Z

Okay, I made a fiddle: https://codepen.io/kliehm/pen/ZYExNdd

With a current Firefox you can see that :placeholder-shown is not equivalent to :-moz-placeholder.

So in current versions of Firefox autoprefixer shouldn't replace it. I didn't succeed to include different versions of autoprefixer in the fiddle, so I made it static. My apologies that I'm not able to pin it down further, if it's a problem with autoprefixer or browserslist. I don't think it's a change in Firefox, since in version 10.4.21 of autoprefixer it gets replaced with :-moz-placeholder, whereas in version 10.4.20 it didn't.

ai · 2025-03-20T14:05:51Z

This fiddle is also useful, thanks for it.
But fiddle is not actual/expected CSS output. Please, it is really important for me to follow the instruction because it saves my time for maintaince open source project.
Talking about this fiddle. What is expected and real behaviour. Please show the screenshot.

I see that Firefox and Chroma output is exactly the same.

kliehm · 2025-03-20T14:15:36Z

Okay, sorry for the inconvenience. This is my output on Firefox v136.0.2 (Windows). It's interesting that your browser is interpreting the second part exactly opposite from the expected behavior of :-moz-placeholder. I can reproduce your screenshot with Chrome 134.0.6998.89.

The expected behavior is the top two examples with :placeholder-shown, same as your result.

The bottom two examples with :-moz-placeholder show that it's not the same result as :placeholder-shown. Although you get different results, you can see that it's not equivalent.

kliehm · 2025-03-21T09:14:34Z

@Marukome0743 I could pin it down: it worked with autoprefixer 10.4.20, was broken with autoprefixer 10.4.21. It is this commit.

The problem is that caniuse lists the replacement with :-moz-placeholder only for Mozilla < 50. For Mozilla > 50 it shouldn't be replaced, pretty please.

Marukome0743 · 2025-03-25T08:01:02Z

The problem is that caniuse lists the replacement with :-moz-placeholder only for Mozilla < 50. For Mozilla > 50 it shouldn't be replaced, pretty please.

Explanation of bug

TL;DR: The support of Kaios 2.5

I finally found out the cause of this issue.
I will describe this step by step.

First, Autoprefixer don't add the :-moz-placeholder under last 1 version browsersl.ist.

Autoprefixer last 1 preview

Second, Autoprefixer appends the :-moz-placeholder from last 2 version browsersl.ist.

Autoprefixer last 2 version preview

Third, I checked the target browsers of the :placeholder-shown property from below code..

autoprefixer/data/prefixes.js

Lines 484 to 493 in 541295c

    
           // Placeholder-shown selector 
        
           let prefixPlaceholderShown = require('caniuse-lite/data/features/css-placeholder-shown') 
        
           f(prefixPlaceholderShown, browsers => { 
        
             prefix([':placeholder-shown'], { 
        
               browsers, 
        
               feature: 'css-placeholder-shown', 
        
               selector: true 
        
             }) 
        
           })

:placeholder-shown target browsers

[
  'firefox 4',  'firefox 5',  'firefox 6',
  'firefox 7',  'firefox 8',  'firefox 9',
  'firefox 10', 'firefox 11', 'firefox 12',
  'firefox 13', 'firefox 14', 'firefox 15',
  'firefox 16', 'firefox 17', 'firefox 18',
  'firefox 19', 'firefox 20', 'firefox 21',
  'firefox 22', 'firefox 23', 'firefox 24',
  'firefox 25', 'firefox 26', 'firefox 27',
  'firefox 28', 'firefox 29', 'firefox 30',
  'firefox 31', 'firefox 32', 'firefox 33',
  'firefox 34', 'firefox 35', 'firefox 36',
  'firefox 37', 'firefox 38', 'firefox 39',
  'firefox 40', 'firefox 41', 'firefox 42',
  'firefox 43', 'firefox 44', 'firefox 45',
  'firefox 46', 'firefox 47', 'firefox 48',
  'firefox 49', 'firefox 50', 'ie 10',
  'ie 11',      'kaios 2.5'
]

The last 2 version browsersl.ist doesn't include the old firefox browsers.
So why does Autoprefixer insert the :-moz-placeholder when you cover only last 2 version?

Because of kaios 2.5.

The last 2 version browsersl.ist covers kaios 2.5.

The last 2 version browsersl.ist

In conclusion, Autoprefixer adds :-moz-placeholder with last 2 version browsersl.ist due to kaios 2.5.

Solutions

1. Do nothing

This is a desired result for the people who want to cover kaios 2.5.
Then continue to adding :-moz-placeholder.

2. Remove kaios from your own Browserslist.

You can change the target of the browsers using .browserslistrc, package.json and so on.
See Browserslist docs for available queries and default value.

3. Don't parse `:placeholder-shown` to `:-moz-placeholder`

At first my PR was the removal of :-moz-placeholder-shown property.
I didn't know the old firefox supports the non-standard :-moz-placeholder name rather than :placeholder-shown partially.
To avoid confusing, stop to parse :placeholder-shown to :-moz-placeholder.

Which solution is better?
Thank you for reading!

kliehm · 2025-03-25T08:46:47Z

3. Don't parse :placeholder-shown to :-moz-placeholder

At first my PR was the removal of :-moz-placeholder-shown property. I didn't know the old firefox supports the non-standard :-moz-placeholder name rather than :placeholder-shown partially. To avoid confusing, stop to parse :placeholder-shown to :-moz-placeholder.

Which solution is better? Thank you for reading!

Thank you for your research. I'm afraid solution #2 doesn't work. According to our Browserslist configuration, KaiOS should be excluded:

> 1% in DE
last 2 versions
not dead

Other browsers and OS have a current market share in Germany of < 0.2% (KaiOS doesn't even appear in stats after 2018), so it shouldn't be included. If that configuration doesn't work, I'd prefer solution #3.

Marukome0743 · 2025-03-25T09:27:52Z

I wonder if you use or combiner instead of and one.

Then you should write this code.

> 1% in DE and last 2 versions
not dead

Please forgive me if it's wrong because I'm newbie on browserslist.

kliehm · 2025-03-25T09:35:04Z

Then you should write this code.
> 1% in DE and last 2 versions
not dead

Good point, I'm not an expert either. I will try that.

Marukome0743 · 2025-03-26T00:36:51Z

Eventually, I got the corrent .browserslistrc.

> 1% in DE
last 2 versions
not dead
not kaios <= 2.5

Exclude kaios from Browserslist

I also paste the result of your previous one to compare easily.

> 1% in DE
last 2 versions
not dead

Previous Browserslist

This .browserslistrc doesn't parse :placeholder-shown to :-moz-placeholder anymore, right?
Could you try it?

kliehm · 2025-03-26T09:21:10Z

Could you try it?

I tried your suggestion

> 1% in DE and last 2 versions
not dead

and it works. So for me that's fine. Thank you for the kind conversation and help.

zipper · 2025-04-01T14:28:47Z

I just came across this issue. My use case is the same—combining :not() and :placeholder-shown, which results in the selector always being applied. I fixed this by adding not kaios <= 2.5, but I’m wondering if there will be an official fix.

Option 3 seems reasonable—could someone verify whether :-moz-placeholder in KaiOS 2.5 behaves the same way as :placeholder-shown? Or could this be an error in the Can I Use data?

jrchamp · 2025-04-04T22:20:42Z

@zipper It looks like the Can I Use data is correct. Based on the KaiOS release history, it seems that KaiOS before 3.0 used Gecko/Firefox 48 (which uses :-moz-placeholder).

So 10.4.20 and earlier had been generating the incorrect :-moz-placeholder-shown for a long time and when it was fixed to :-moz-placeholder, it was technically fixing support for Firefox <= 50 and KaiOS 2.5. The problem is that this backward compatibility code for old versions of Firefox-based browsers is having negative effects on current versions of Firefox-based browsers.

The options seem to be:

Rework CSS to avoid combining :not() with an autoprefixed property.
Drop support for old Firefox-based browsers (including KaiOS 2.5)

Example, if the text is black and we use :not(:placeholder-shown) to make the text green. Then it will be expanded to two rules, :not(:placeholder-shown) and :not(:-moz-placeholder) that both make the text green when true.

Then, if the element is not showing the placeholder and the browser supports:

neither property, then the text is black (because both are treated as invalid).
only :placeholder-shown, then the text is black (because one of them is false and the other rule is treated as invalid).
only :-moz-placeholder, then the text is black (because one of them is false and the other rule is treated as invalid).
:-moz-placeholder and :placeholder-shown, then the text should be black (because both should be false).
- if the text is green, then it probably means that the newer property, :placeholder-shown, is correctly set to false and the older property :-moz-placeholder is "known"/"not invalid" but not set to false

One approach to reworking the CSS would be to focus on the positive: write the default rule and then positively override that default with when :placeholder-shown is true.

jrchamp · 2025-04-04T22:31:01Z

As a sidenote, :is() exists and may simplify pseudo class selector expansion on newer browsers (but probably won't help with this issue).

From https://developer.mozilla.org/en-US/docs/Web/CSS/:not#description

If any selector passed to the :not() pseudo-class is invalid or not supported by the browser, the whole rule will be invalidated. The effective way to overcome this behavior is to use :is() pseudo-class, which accepts a forgiving selector list. For example :not(.foo, :invalid-pseudo-class) will invalidate a whole rule, but :not(:is(.foo, :invalid-pseudo-class)) will match any (including <html> and <body>) element that isn't .foo.

karolyi · 2025-05-02T13:36:18Z

I was wondering why floating form labels don't work in bootstrap and as I started investigating, I've bumped into this bug.

Practically, because of this bug, a

.form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
  transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

will get turned into

.form-floating > .form-control:not(:-moz-placeholder) ~ label {
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

The former is from the bootstrap site's CSS itself, the latter is my webpack-generated CSS output with using postcss-preset-env. No extra formattings or adjustments on my behalf, it's what gets generated with webpack from the latest bootstrap source. I've tracked the bug down to postcss-preset-env, it works when I comment it out from the webpack configuration.

Looking forward to have this bug fixed because I'm quite sure it corrupts floating labels for everyone else too.

jrchamp · 2025-05-02T15:50:01Z

@karolyi The floating form labels issues was fixed by removing KaiOS 2.5 support from Bootstrap 5.3.5 via twbs/bootstrap@b1e16bd

karolyi · 2025-05-02T15:53:08Z

@jrchamp thanks, but that only applies for the bootstrap website, I presume. I'm using bootstrap as a module and have my own .browserslistrc setting.

I've added the referenced line to it for now, but you can expect others to show up with this same issue.

Marukome0743 mentioned this issue Mar 21, 2025

fix: remove :-moz-placeholder from :placeholder-shown property in Firefox > 50 #1535

Closed

julien-deramond mentioned this issue Apr 4, 2025

Floating labels always in floated state in 5.3.4 twbs/bootstrap#41342

Closed

3 tasks

Uh oh!

:placeholder-shown is replaced with -moz-placeholder, although this is outdated #1533

:placeholder-shown is replaced with -moz-placeholder, although this is outdated #1533

Comments

kliehm commented Mar 20, 2025

ai commented Mar 20, 2025

Uh oh!

ai commented Mar 20, 2025

Uh oh!

ai commented Mar 20, 2025

Uh oh!

kliehm commented Mar 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ai commented Mar 20, 2025

Uh oh!

kliehm commented Mar 20, 2025

Uh oh!

ai commented Mar 20, 2025

Uh oh!

kliehm commented Mar 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ai commented Mar 20, 2025

Uh oh!

kliehm commented Mar 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kliehm commented Mar 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Marukome0743 commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of bug

Solutions

1. Do nothing

2. Remove kaios from your own Browserslist.

3. Don't parse :placeholder-shown to :-moz-placeholder

Uh oh!

kliehm commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

3. Don't parse :placeholder-shown to :-moz-placeholder

Uh oh!

Marukome0743 commented Mar 25, 2025

Uh oh!

kliehm commented Mar 25, 2025

Uh oh!

Marukome0743 commented Mar 26, 2025

Uh oh!

kliehm commented Mar 26, 2025

Uh oh!

zipper commented Apr 1, 2025

Uh oh!

jrchamp commented Apr 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jrchamp commented Apr 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

karolyi commented May 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jrchamp commented May 2, 2025

Uh oh!

karolyi commented May 2, 2025

Uh oh!

kliehm commented Mar 20, 2025 •

edited

Loading

kliehm commented Mar 20, 2025 •

edited

Loading

kliehm commented Mar 20, 2025 •

edited

Loading

kliehm commented Mar 21, 2025 •

edited

Loading

Marukome0743 commented Mar 25, 2025 •

edited

Loading

3. Don't parse `:placeholder-shown` to `:-moz-placeholder`

kliehm commented Mar 25, 2025 •

edited

Loading

3. Don't parse `:placeholder-shown` to `:-moz-placeholder`

jrchamp commented Apr 4, 2025 •

edited

Loading

jrchamp commented Apr 4, 2025 •

edited

Loading

karolyi commented May 2, 2025 •

edited

Loading