:placeholder-shown stopped working on all browsers expect Firefox when using vite.js

[late hull]

Hello everyone, I'm encountering a very strange issue. I have a project bundled with vitecss and I'm trying to style a textarea when the placeholder is shown like this:

textarea:placeholder-shown {
    background: red;
}```
In Firefox it is styling it correctly, but chromium and webkit browsers don't. They don't style anything. 🤷‍♂️ 

When I build the css, I see the specific style existing: `textarea:-moz-placeholder-shown {background: red;} textarea:placeholder-shown {background: red;}` but still, chrome, edge and safari don't care about it. I also don't see it listed and overwritten somewhere in the inspector.

When I go and add the css into a `style` tag within the html, it works in all browsers. So basically I know the code is right. And I see it listed in the bundled style.css. But still, the majority of the browser just ignoring it. 

You can also see the attached image, where from left to right you'll see the working example in Firefox, the bundled source code and safari, where its not working.

I'm pretty lost about this one. Am I overseeing something? Or could somebody hint me a way, how to further troubleshoot this one?

I've just found some more details and was able to identify the issue. When I disable autoprefixing in vite/postcss, and the css doesn't get loaded with textarea:-moz-placeholder-shown before the regular statement textarea:placeholder-shown {background: red;}, all browsers show the style. But since I would appreciate some prefixing, I'm still stunned why browsers except firefox just don't ignore this prefix 🤔

[knotty oriole]

It sounds like you've already done quite a bit of troubleshooting, but it seems like the issue might be related to how different browsers handle CSS pseudo-classes and vendor prefixes.

Confirm if the placeholder-shown pseudo-class and its vendor-prefixed versions are supported in the browsers you're testing. Sometimes, browser support for newer CSS features can be inconsistent.

Try experimenting with different Autoprefixer settings or options to see if you can find a configuration that works consistently across browsers.

Sometimes, browser extensions or custom browser settings can interfere with CSS rendering. Try testing your styles in a clean browser environment (e.g., using a private or incognito window) to see if the issue persists.

Make sure there are no other CSS rules that could be overriding or conflicting with the styles you're trying to apply to the textarea.

[late hull]

yeah I was able to trackdown the issue. chromium and webkit browsers (at least mines with latest versions) don't ignore the moz-placeholder-shown prefix. Or better, the ignore the css styling following directly on it. So basically, I'm able to get rid of the issue when configuring browserslist correctly. Kinda solves the issue but then again, it keeps me wondering why browsers even do that 🤷‍♂️

[knotty oriole]

Never had the issue tbh, i always use chrome.