Closed
Description
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. |
 |
When I add the same image I use on my OS wallpaper on <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
- Linux (Zorin OS)
- "@tauri-apps/api": "^1.0.0-beta.8"
- "@tauri-apps/cli": "^1.0.0-beta.10"
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'"
}
}
}