[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

AB#52983110

[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.

[leaanthony]

@hbl917070 that does make sense... If this is a "wont do" fair enough. I would have thought it was possible to blur against a transparent background though, somehow.

[bradp0721]

We are already tracking this issue internally. I've marked this issue so it is linked to our internal backlog.

Currently, the above behavior is by design in Chromium. The blurring effect uses the surrounding pixels to achieve the effect. Since the top level window of the browser always has an opaque color, this isn't an issue for Chromium and other browsers. However, since WebView2 enables a transparent background color, now the blurring effect has no surrounding pixels to use to achieve the blur. We are still investigating how to solve this issue for WebView2s with transparent backgrounds.

[leaanthony]

Thank you so much for the quick feedback @bradp0721 🙏