:placeholder-shown stopped working on all browsers expect Firefox after vite.js bundles css
As the title states, I have a working solution in Firefox, which isn't working anymore in chromium and webkit browsers. I target textareas pretty simple with
textarea:placeholder-shown, which is working great in Firefox. In all other browsers, nothing is rendering. Is that a known issue?14 Replies
show us
I can add some more details for clarification:
Its a tailwind / vitecss build and I'm styling a textarea when the placeholder is shown like this:
As written, Firefox is styling it correctly, 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'm seeing working code listed in the style.css but still, the majority of the browser just ignoring it. I'm pretty lost about this one. Am I overseeing something?the reason Mannix says "show us" is because it works just fine in isolation, so there must be something wrong with your code somewhere that's overriding this. This minimal example works just fine in my chrome https://codepen.io/jochemm/pen/xxeepga
yes thats true, maybe the title is misleading. When I add the style with a style tag, its working fine. But when I bundle it with vite.js, even though the code is inside the bundled style.css, its not rendering 🤷♂️
and what I'm saying is that we cannot diagnose this issue without seeing it not working in our own browsers, because the issue is clearly not related to :placeholder-shown being broken in chromium
yeah you're right, placeholder-shown is not broken. see this attached image, from left to right firefox, source code and safari. I was hoping, somebody could hint me how to troubleshoot this, I'm kinda out of ideas 🙈
if you can share a deployed version, someone might be able to take a look
No I can't yet, still everything local atm. I've been sitting on this one quite some time and I can't figure it out. So strange, never happend before 😧 I can't explain, why the browser doesn't pickup code, which is clearly getting outputted in the style.css 🤔
wow, my last message lead me on the correct way, I was able to identify the issue. When I disable autoprefixing in vite/postcss, and my css doesn't render
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 just don't ignore this prefix 🤔that's very odd, they really should
yeah thats what I'm thinking as well 🤷♂️
strangley, the issue occurs in multiple browsers. so basicaly, its not only a "safari bug on the last version" but something deeper within how prefixes get handled. oh man, this one will get tricky to debug 😵💫
might be worth checking if you can just disable the autoprefix for that one rule
the unprefixed version has been supported since firefox 51 so it's not like it adds a lot
I kinda solved the issue. Still not explainable, why browser get irritated by the
-moz-placeholder-shown prefix but configuring browserslist with
solves the issue – not optimizing for old firefox versions and ignoring Kai OS smaller than 3 🤷♂️it's odd that it's even including the prefix, from my reading of caniuse the version of firefox that needs that prefix is <0.05%
its because of kaios 2.x