Backdrop Filter outputs only preffixed version

[kaumac]

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]

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]

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]

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]

@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]

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]

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]

.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.

[heycassidy]

Same issue here in Panda CSS when using lightningcss. Works fine if use postcss instead.

[taras-turchenko-moc]

Have the same issue with custom setup using rspack + built in lightningcss loader. I have just plain css / scss without any tailwind etc

[taras-turchenko-moc]

The issue occurs when css selector have prefixed and unprefixed properties

invalid output | valid output

when prefixed rule is before unprefixed it seems works fine