Blurry and translucent background on a transparent window #2827
Comments
|
This is the expected behavior on Linux and Windows, 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 |
|
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. |
|
Closing this since you can try out the plugin from Amr now. The feature might land in tauri v2. |
|
@lucasfernog Do we have any news about this for v2 ? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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-filteralong 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: trueon tauri.conf.json. The window is in front of my OS wallpaper.backdrop-filter: blur(20px)and also abackground: rgba(238, 238, 244, 0.5). On the right side I have another but withbackground: transparent.<body>, the desired blur effect appears.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
{ "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'" } } }The text was updated successfully, but these errors were encountered: