Windows option WebviewIsTransparent has undesired effects on backdrop-filter blur CSS rule

brody192 commented 1 year ago

Description

The underlying text is visible through an element with the backdrop-filter blur rule applied. there is a blur but the text shouldn't show through too. this is only an issue with WebviewIsTransparent being set to true.

Image of issue

To Reproduce

demo.zip

reproducible code

Expected behaviour

what the blur filter should look like

now the backdrop-filter works but the background is a solid color but the mica theme doesn't show through

Screenshots

No response

Attempted Fixes

I have tried other types of blur filters but none of them work and wouldn't archive what I wanted anyway

System Details

# System

OS           | Windows 10 Pro
Version      | 2009 (Build: 22621)
ID           | 22H2
Go Version   | go1.19.4
Platform     | windows
Architecture | amd64

# Wails

Version | v2.3.1

# Dependencies

Dependency | Package Name | Status    | Version
WebView2   | N/A          | Installed | 109.0.1518.70
npm        | N/A          | Installed | 8.19.2
*upx       | N/A          | Installed | upx 3.96
*nsis      | N/A          | Available |

Additional context

No response

lennybakkalian commented 1 year ago

This bug also occurs when WindowIsTranslucent is set to true.

lennybakkalian commented 1 year ago

looks like this bug also exists in electron when the body (or element behind it) has no background(color) (in combination with transparency / translucent). https://github.com/electron/electron/issues/19765

laeo commented 1 year ago

Any updates on this? I also have this issue, the blur has worked, but when i dragging the window, blur could not working for few frames.

laeo commented 11 months ago

I would like to tell you guys, after add the css style below, the blur effect seems working properly.

* {
    will-change: auto;
}

brody192 commented 11 months ago

I would like to tell you guys, after add the css style below, the blur effect seems working properly.
* {
    will-change: auto;
}

Unfortunately, that doesn't seem to change anything after adding that to the demo code

zxk-afz commented 11 months ago

Any update, I'm using electron 25 and it still doesn't work.

xolyn commented 4 months ago

any update rn?

leaanthony commented 5 days ago

Has anyone tried this? https://github.com/electron/electron/issues/19765#issuecomment-659552812

leaanthony commented 5 days ago

Opened an upstream bug report.

leaanthony commented 2 days ago

This is now with the Webview2 team. They are tracking it internally.

wailsapp / wails