Open kaumac opened 8 months ago
I am not seeing that behavior in the playground. I used the browserslist website to convert your browserslist to versions.
Maybe it's something in panda?
I encountered the same problem.
Input:
.foo {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
Output:
.foo{-webkit-backdrop-filter:blur(10px)}
Not work in Firefox and Chrome.
Here is we expect:
.foo{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
Sorry forgot to reply. I'm no longer using Panda (and therefore lightningcss).
But both on the playground that @devongovett shared (Playground link) and on the one that @zillnet-l2 shared (playground link) this issue is being reproduced, so definitely aa lightningcss issue.
I don't know how there aren't more people reporting this as it's very critical.
@kaumac @zillnet-l2 The suggestion at #785 should fix your issue. In short, the webkit prefix must be before the unprefixed version. Playground link
Could this be related to Tailwindcss and Safari? I can't get Parcel to output the backdrop-filter with the -webkit prefix, even though tailwind now officially adds the prefixed property in addition to the standard in the css output. My guess is lightning removes it and I can't figure out how to prevent that from happening.
Could this be related to Tailwindcss and Safari? I can't get Parcel to output the backdrop-filter with the -webkit prefix, even though tailwind now officially adds the prefixed property in addition to the standard in the css output. My guess is lightning removes it and I can't figure out how to prevent that from happening.
I'm stuck with this now as well 🤔
.background-blur {
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
In Safari...
If you add -webkit-backdrop-filter: blur(20px);
on it's own then Safari works but Chrome doesn't. I seem to be going round in circles here. This is a basic Tailwind setup which doesn't work, even adding a custom CSS class as above it strips it.
Hey all!
I'm using lightningcss with pandacss and the output of
backdrop-filter
is only-webkit-backdrop-filter: '...'
, causing it not to work on the most recent version of Edge.This is my current browserlist setup:
'last 10 versions', 'not dead', 'not < 2%'