[bug] Inconsistent backdrop-blur Effect on Transparent Window

[JohnDiniz]

Describe the bug

When applying the transparent: true property to a window (either with CSS or Tailwind), the backdrop-blur effect does not behave as expected. The blur effect appears weaker or distorted compared to when transparent: false is used or in Chrome, where the blur effect is strong and well-defined.

In Chrome, the backdrop-blur effect works as intended, providing a strong and clear blur. However, when transparent: true is applied, the blur effect becomes weak or behaves unexpectedly, creating an inconsistent visual experience.

In the image above, the left side shows the effect with transparent: false, where the blur is strong and defined. On the right side, with transparent: true, the blur appears weaker and less effective.

Reproduction

import { useState } from "react";

const DropdownExample = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="relative">
     
      <button
        onClick={toggleDropdown}
        className="px-4 py-2 bg-blue-500 text-white rounded-md focus:outline-none"
      >
        Toggle Dropdown
      </button>

     
      {isOpen && (
        <div className="fixed inset-0 bg-black bg-transparent backdrop-blur-xl z-10"></div>
      )}

      
      {isOpen && (
        <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-20">
          <ul className="py-1">
            <li className="px-4 py-2 text-gray-700 hover:bg-gray-200 cursor-pointer">Option 1</li>
            <li className="px-4 py-2 text-gray-700 hover:bg-gray-200 cursor-pointer">Option 2</li>
            <li className="px-4 py-2 text-gray-700 hover:bg-gray-200 cursor-pointer">Option 3</li>
          </ul>
        </div>
      )}
    </div>
  );
};

export default DropdownExample;

Expected behavior

If possible, I would like the blur effect to remain as strong and consistent as it is when the transparent: false configuration is used.

Full tauri info output

[✔] Environment
    - OS: Windows 10.0.19045 x86_64 (X64)
    ✔ WebView2: 131.0.2903.146
    ✔ MSVC: Visual Studio Community 2022
    ✔ rustc: 1.84.0 (9fc6b4312 2025-01-07)
    ✔ cargo: 1.84.0 (66221abde 2024-11-19)
    ✔ rustup: 1.27.1 (54dd3d00f 2024-04-24)
    ✔ Rust toolchain: stable-x86_64-pc-windows-msvc (default)
    - node: 22.13.0
    - pnpm: 10.0.0
    - npm: 10.9.2

[-] Packages
    - tauri 🦀: 2.2.2
    - tauri-build 🦀: 2.0.5
    - wry 🦀: 0.48.1
    - tao 🦀: 0.31.1
    - @tauri-apps/api : 2.2.0
    - @tauri-apps/cli : 2.2.5

[-] Plugins
    - tauri-plugin-opener 🦀: 2.2.4
    - @tauri-apps/plugin-opener : 2.2.4
    - tauri-plugin-positioner 🦀: 2.2.0
    - @tauri-apps/plugin-positioner : 2.2.0

[-] App
    - build-type: bundle
    - CSP: unset
    - frontendDist: ../dist
    - devUrl: http://localhost:1420/
    - framework: React
    - bundler: Vite

No response