MicrosoftEdge / MicrosoftEdge/WebView2Feedback

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

Open
#4,945 5 comments 1 reaction 1 assignee View on GitHub

Nobody has claimed this yet.

bug
Dominant language
PowerShell
Stars
526
Forks
67
PR merge metrics
No merged PRs in 30d

Description

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:

image

It works as expected if Alpha = 255:

image

Original report (via Wails): https://github.com/wailsapp/wails/issues/2340
I don't know if it's useful or not, but the same bug happened on Mac: https://github.com/illixion/vscode-vibrancy-continued/issues/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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.