BackdropFilter not working as expected

[sjaakbanaan]

Description

I'm trying to achieve the following css rule:
backdrop-filter: blur(8px)

In this demo it works just fine:
https://play.panda-css.com/Kxqd_8YZKN

it outputs this in DOM:

But for some reason in my project it only shows this:

Even though i do see it in the generated index.css like this:
.bkdp_blur\(8px\){backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

Any idea what can cause this? It's driving me nuts.. thanks.

Link to Reproduction

https://play.panda-css.com/Kxqd_8YZKN

Steps to reproduce

1. Go to https://play.panda-css.com/Kxqd_8YZKN and see the backdrop being applied

JS Framework

React / Next.js

Panda CSS Version

0.53.7

Browser

Latest Chrome for both tests

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[segunadebayo]

That's weird. Sounds things that come to mind:

• Update your browserlist npx update-browserslist-db@latest
• Consider removing any css polyfills
• Try to turn off turbo mode in Next.js
• Try this in a new Vite project to see if the issue persists.

Definitely a strange error.

[fransiscushermanto]

Hi @segunadebayo, I've found out that this issue arise when you use nextjs v15.3.3, when I use next v15.0.4 everything works fine.

[fransiscushermanto]

I think the solution is by downgrading your nextjs version to 15.0.4 @sjaakbanaan and it will work again if you want to keep using --turbopack. If you are okay with not using the --turbopack features, you can disabled it just like what @segunadebayo suggest, I've tried both solution and it works.

[shawngustaw]

Has the actual issue been identified? Next 16 is probably going to be released this week and turbopack is going to be the default for dev and prod builds.

[pkrawc]

This is still an issue in nextjs version 16.1.6 w/ bun.

[spaaacetoast]

parcel-bundler/lightningcss#695 (comment) this comment brought me on the right track! LightningCSS seems to be removing the unprefixed backdrop-filter if the order is wrong. in my case there was no order to fix. so I edited their answer to readd the backdrop-filter!

  plugins: [
    {
      // Based on https://github.com/parcel-bundler/lightningcss/issues/695#issuecomment-3780316192
      name: 'Fix backdrop-filter for LightningCSS',
      hooks: {
        'cssgen:done': ({ artifact, content }) => {
          if (artifact !== 'styles.css') return

          // LightningCSS removes the unprefixed `backdrop-filter`, leaving only
          // `-webkit-backdrop-filter`. This adds it back after the prefixed version.
          return content.replace(
            /(-webkit-backdrop-filter:\s*)([^;]+;)(?!\s*backdrop-filter:)/g,
            '$1$2\n  backdrop-filter: $2'
          )
        },
      },
    },
  ],