[Bug]: CSS rendering is different when webview transparency set

[leaanthony]

What happened?

When using a background colour for both host window and webview with Alpha = 0, the CSS backdrop-filter: blur does not work as expected.

Example when using Mica:

It works as expected if Alpha = 255:

Original report (via Wails): wailsapp/wails#2340
I don't know if it's useful or not, but the same bug happened on Mac: illixion/vscode-vibrancy-continued#87

Importance

Moderate. My app's user experience is affected, but still usable.

Runtime Channel

Stable release (WebView2 Runtime)

Runtime Version

131.0.2903.63

SDK Version

No response

Framework

Win32

Operating System

Windows 11

OS Version

26100.2454

Repro steps

• Create a standard win32 window
• Embed the webview
• Set the webview background colour to {0,0,0,0}
• Load the attached html file
• See the text without blur
• Set the webview background colour to {0,0,0,255}
• Load the attached html file
• See the text with blur

Index html (renamed to txt to upload)
index.txt

Repros in Edge Browser

No, issue does not reproduce in the corresponding Edge version

Regression

No, this never worked

Last working version (if regression)

No response

[hbl917070]

I encountered the same issue as well.
However, blur processing needs to calculate with the surrounding pixels to achieve the effect. If all the surrounding pixels are transparent, it makes sense that the blur cannot be computed.
After all, CSS's backdrop-filter only applies to elements within the webpage, and the content beneath the browser window is not included in the computation.
To solve this problem, the only option would be to continuously set the content beneath the window as the webpage background when the WebView2 background color is transparent. However, this approach would likely incur a very high computational cost.