CSS backdrop-filter property disappear in Next.js 15.3.0/15.3.1 dev mode with Turbopack

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/sweet-lumiere-s7v6jh

To Reproduce

npm run dev

and use chromium core

The backdrop-filter issue specifically occurs in Next.js 15.3.0 and later versions when using Turbopack (next dev --turbo). The problem arises when the CSS properties are ordered with the -webkit-backdrop-filter prefix first, followed by the standard backdrop-filter, like this: -webkit-backdrop-filter: blur(Xpx); backdrop-filter: blur(Xpx);. In this specific ordering under Turbopack, the standard backdrop-filter: blur(Xpx); declaration effectively disappears or is ignored during processing, preventing the blur effect from rendering in non-WebKit browsers. Reversing this order or running without Turbopack resolves the issue.

The current solution is to roll back to nextjs 15.2.5

Current vs. Expected behavior

Current behavior:

When running a Next.js 15.3.0+ project in development mode with Turbopack (next dev --turbo), and CSS is written with the -webkit-backdrop-filter property declared before the standard backdrop-filter property, the standard backdrop-filter rule is seemingly ignored or removed during processing. This results in the blur effect not being applied in browsers that rely on the standard property (like Firefox and modern Chrome/Edge), even though the -webkit- prefixed version might still be present in the processed CSS. The visual effect is that the element has its semi-transparent background, but the content behind it is not blurred.

Expected behavior:

Regardless of whether Turbopack is used or the order in which -webkit-backdrop-filter and backdrop-filter are declared in the source CSS, the Next.js development server should process the CSS correctly, ensuring that both the prefixed and standard properties are output if needed for the target browsers. The visual expectation is that the backdrop-filter: blur() effect should render correctly in all supporting browsers, blurring the content behind the element, consistent with the behavior in production builds or when next dev without Turbopack is used, or with previous Next.js versions (like 15.2.5.2.ehavior in production builds or when next dev without Turbopack is used, or with previous Next.js versions (like 15.2.x) even when using Turbopack.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.4.0: Fri Apr 11 18:33:47 PDT 2025; root:xnu-11417.101.15~117/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 23.11.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: 10.8.1
Relevant Packages:
  next: 15.3.1 // Latest available version is detected (15.3.1).
  eslint-config-next: 15.1.0
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

create-next-app, Turbopack, CSS

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

Start with the linked CodeSandbox and run npm run dev using Chromium, then compare next dev --turbo with development without Turbopack and with Next.js 15.2.5. Inspect the processed CSS when -webkit-backdrop-filter precedes backdrop-filter, focusing on where the standard declaration disappears. Done means both declarations are preserved and the blur works in the affected browsers without changing their order.