parcel-bundler / lightningcss

An extremely fast CSS parser, transformer, bundler, and minifier written in Rust.
https://lightningcss.dev
Mozilla Public License 2.0
6.49k stars 188 forks source link

Backdrop Filter outputs only preffixed version #695

Open kaumac opened 8 months ago

kaumac commented 8 months ago

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%'

devongovett commented 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?

zillnet-l2 commented 6 months ago

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)}
kaumac commented 6 months ago

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.

tsevasa commented 3 months ago

@kaumac @zillnet-l2 The suggestion at #785 should fix your issue. In short, the webkit prefix must be before the unprefixed version. Playground link

iberflow commented 3 months ago

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.

olliekav commented 1 month ago

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 🤔

olliekav commented 1 month ago
.background-blur {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

In Safari... Screenshot 2024-09-22 at 11 23 11

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.