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.