[bug] transparent + backdrop-filter: blur() cannot be effective when move window

[Y80]

Describe the bug

The transparent effect cannot be effective in real time(when move window).

discord: demo video

Reproduction

No response

Expected behavior

No response

Platform and versions

[✔] Environment
    - OS: Mac OS 13.3.1 X64
    ✔ Xcode Command Line Tools: installed
    ✔ rustc: 1.65.0 (897e37553 2022-11-02)
    ✔ Cargo: 1.65.0 (4bc8f24d3 2022-10-20)
    ✔ rustup: 1.25.1 (bb60b1e89 2022-07-12)
    ✔ Rust toolchain: stable-aarch64-apple-darwin (default)
    - node: 16.16.0
    - pnpm: 8.3.1
    - yarn: 1.22.19
    - npm: 8.11.0

[-] Packages
    - tauri [RUST]: 1.3.0
    - tauri-build [RUST]: 1.3.0
    - wry [RUST]: 0.24.1
    - tao [RUST]: git+https://github.com/tauri-apps/tao?branch=v0.16#ed6aab6b1226e56683798732ad01bf3f4658097e (0.16.0)
    - @tauri-apps/api [NPM]: 1.3.0
    - @tauri-apps/cli [NPM]: 1.3.0

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

Stack trace

No response

Additional context

No response

[Y80]

appWindow.onMoved(() => {
  document.body.style.opacity = '0'
  requestAnimationFrame(() => {
    document.body.style.opacity = '1'
  })
})

This solution has only a small effect, I guess because emit 'onmoved' event are so slow.

demo video

[Y80]

import { useEffect, useRef } from 'react'

export default function Header() {
  const headerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const ele = headerRef.current!
    let isClicked = false
    function handleMouseDown() {
      isClicked = true
    }
    function handleMouseUp() {
      isClicked = false
    }
    function handleMouseMove() {
      if (!isClicked) return
      document.body.style.opacity = '0'
      requestAnimationFrame(() => {
        document.body.style.opacity = '1'
      })
    }
    ele.addEventListener('mousedown', handleMouseDown)
    ele.addEventListener('mouseup', handleMouseUp)
    ele.addEventListener('mousemove', handleMouseMove)

    return () => {
      ele.removeEventListener('mousedown', handleMouseDown)
      ele.removeEventListener('mouseup', handleMouseUp)
      ele.removeEventListener('mousemove', handleMouseMove)
    }
  }, [])

  return <div data-tauri-drag-region ref={headerRef}></div>
}

This is my final solution. It's very effective.

https://user-images.githubusercontent.com/40132433/236845205-dd2706ed-b3cf-44f3-ae68-b7f9687b8329.mov

[blueneogeo]

Hi, I am not sure if it matches your use case, but I was looking into the same problem and found this:

https://github.com/tauri-apps/window-vibrancy

It works great and solves the issue at the Tauri window level. It does of course require the private api use and setting transparency to on, but I believe the above solution needs this as well.