search

tauri-apps / tauri

Build smaller, faster, and more secure desktop and mobile applications with a web frontend.
https://tauri.app
Apache License 2.0
83.81k stars 2.52k forks source link

Blurry and translucent background on a transparent window #2827

Closed richardaum closed 2 years ago

richardaum commented 2 years ago

Is your feature request related to a problem? Please describe. I'm trying to use a blurry background on a transparent window element (sidebar).

Describe the solution you'd like Use backdrop-filter along with a transparent window to achieve a blurry background.

Describe alternatives you've considered I've also tried to use -webkit-filter: blur(20px), but same thing happens.

Additional context

The following screenshots were taken with a transparent window - transparent: true on tauri.conf.json. The window is in front of my OS wallpaper.

Description Image
On the left side I have a div with backdrop-filter: blur(20px) and also a background: rgba(238, 238, 244, 0.5). On the right side I have another but with background: transparent. image
When I add the same image I use on my OS wallpaper on <body>, the desired blur effect appears. image

Conclusion: The blur effects appears only when the image is part of the application, and doesn't consider what is behind the transparent window. Should it?

Info

tauri.conf.json ```json { "package": { "productName": "findr", "version": "0.1.0" }, "build": { "distDir": "../build", "devPath": "http://localhost:3000", "beforeDevCommand": "yarn start", "beforeBuildCommand": "yarn build" }, "tauri": { "bundle": { "active": true, "targets": "all", "identifier": "com.tauri.dev", "icon": [ "icons/32x32.png", "icons/128x128.png", "icons/128x128@2x.png", "icons/icon.icns", "icons/icon.ico" ], "resources": [], "externalBin": [], "copyright": "", "category": "DeveloperTool", "shortDescription": "", "longDescription": "", "deb": { "depends": [], "useBootstrapper": false }, "macOS": { "frameworks": [], "minimumSystemVersion": "", "useBootstrapper": false, "exceptionDomain": "", "signingIdentity": null, "entitlements": null }, "windows": { "certificateThumbprint": null, "digestAlgorithm": "sha256", "timestampUrl": "" } }, "updater": { "active": false }, "allowlist": { "all": true }, "windows": [ { "title": "Findr", "width": 800, "height": 600, "resizable": true, "fullscreen": false, "decorations": false, "transparent": true } ], "security": { "csp": "default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'" } } } ```
amrbashir commented 2 years ago

This is the expected behavior on Linux and Windows, backdrop-filter only affects DOM elements, anything behind the window will not be blurred.

The solution is to blur the window itself. It is not currently implemented and needs to be added in upstream first, subscribe to this tauri-apps/tao#137

amrbashir commented 2 years ago

for anyone interested in this issue, I made a https://github.com/tauri-apps/tauri-plugin-vibrancy to experiment with the feature. it supports tao and tauri and I'd appreciate feedback on different Windows versions, macOS support will be added later.

Edit: macOS is now supported.

lucasfernog commented 2 years ago

Closing this since you can try out the plugin from Amr now. The feature might land in tauri v2.

arialpew commented 5 months ago

@lucasfernog Do we have any news about this for v2 ?