[Bug]: CSS rendering is different when webview transparency set
leaanthony opened this issue · 4 comments
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
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.
@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.
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.
Thank you so much for the quick feedback @bradp0721 🙏