Setting WebView2.DefaultBackgroundColor to Colors.Transparent leads to ApplicationPageBackgroundThemeBrush being set as Background instead of actual transparency

[WelterDevelopment]

Describe the bug

Setting WebView2.DefaultBackgroundColor to transparent results in a Background that seems to be equivalent to the color of ApplicationPageBackgroundThemeBrush (e.g. 32, 32, 32 in Dark theme). That is not what I want. And changing the RequestedTheme at runtime after CoreWebView2 has initialized has no effect on the background color. Moreover, changing the RequestedTheme has no effect at all, the WebView2 control seems to set the background based on the ApplicationTheme which cannot be changed at runtime.

Steps to reproduce the bug

XAML:

<Grid Background="Red">
  <WebView2 DefaultBackgroundColor="Transparent" Loading="WebView2loading"></WebView2>
</Grid>

C#:

private async void WebView2loading(FrameworkElement sender, object args)
{
  await ((WebView2)sender).EnsureCoreWebView2Async();
}

Expected behavior

The expected behavior is that setting the BackgroundColor to transparent should set the background color to transparent.

Screenshots

The Background should be red in the example.

NuGet package version

WinUI 3 - Windows App SDK 1.0 (If you're seeing your issue in older previews of WinUI 3, please try this release)

Windows app type

• [ ] UWP
• [X] Win32

Device form factor

Desktop

Windows version

Insider Build (xxxxx)

Additional context

Testet on 21H2 (22000.376)

[Dixeran]

Same here using WinUI3 ver1.0 C++ Desktop.

[DexterLeung]

The issue still exists in WinUI 3 ver 1.1 C# Desktop

[krschau]

The WebView2.DefaultBackgroundColor is really exposing the CoreWebView2Controller.DefaultBackgroundColor property. When it is transparent, you see through to the color of the visual that's rendering the webview content, which is indeed set to the theme background color.

It's a valid complaint that that color can't be changed at runtime. The two possible solutions would be to sync it with the WebView2's ActualTheme, or sync it with the WebView2's Background color property. I'm curious if you have a preference.

Tracked internally with https://task.ms/37699008

[WelterDevelopment]

Thanks for your answer. My preference is actual transparency. My complaint is not that the color can't be changed at runtime, but that the color can't be set to Colors.Transparent. Otherwise, effects lice Mica and Acrylic arent usable. And it's hard for me to believe that it is impossible, since stuff like this exists: https://marketplace.visualstudio.com/items?itemName=eyhn.vscode-vibrancy So why can the Electron html wrapper (chromium-based) can have transparent background, but WebWiev2 (also chromium-based) can't? From the two solutions you proposed, the second one is better because of the higher flexibility.

[Diegorro98]

The issue remains in WindowsAppSDK 1.2.220902.1-preview1 It would be great to have transparent background in order to get mica background at WebView from parent UIElements.

[agenne]

Hi, we try to change our UWP app so that it now use the new WebView2. Unfortunately there is no DefaultBackgroundColor available on the WebView2 which is very important for us.

First we found this post which stated that it will not be supported in winui3: https://github.com/microsoft/microsoft-ui-xaml/issues/2992

and this one: https://github.com/microsoft/microsoft-ui-xaml/issues/4378

After further research we found this post: https://github.com/MicrosoftEdge/WebView2Feedback/issues/1621

and this one: https://github.com/MicrosoftEdge/WebView2Feedback/issues/1604

Both suggest to set the DefaultBackgroundColor by setting a Environment Variable like so: Environment.SetEnvironmentVariable("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "0");

We tried out and it worked well.

Now we would like to know, if this undocumented way to make this work is officially allowed, and if there are risks to do so.

Thank You in advance

[3d4m-volodymyr]

We also need this feature. It would be good to know if it will be officially allowed.

@agenne, what target SDK version do you use in your project? We also have a UWP project and same challenge.

[agenne]

The target version of our UWP App is 19041

Note that there is another issue: https://github.com/MicrosoftEdge/WebView2Feedback/issues/2917

Because of this one we can't go live for months

[franklbt]

This issue is also preventing using Mica or acrylic backdrop on MAUI on Windows for example https://github.com/dotnet/maui/issues/16874

[JJBrychell]

The current design of WebView2 does not allow for this and it would need design and be feature level work. Converting to a Feature Proposal.

[softworkz]

The current design of WebView2 does not allow for this and it would need design and be feature level work. Converting to a Feature Proposal.

Isn't it rather the design of WinUI3? Just to recap:

• WebView2 with hWnd rendering => Transparency working
• WebView2 with WinUI2 composition=> Transparency working
• WebView2 with WinUI3 composition => Transparency not working

With WinUI3 and the latest experimental WinAppSDK, it is at least possible to get a Mica material background. Please see here: https://github.com/MicrosoftEdge/WebView2Feedback/issues/3439#issuecomment-1732389346

So, in summary, this rather looks to me like a shortcoming of WinUI3 composition rather than a problem with WebView2 design. When it can render with transparency in WinUI2, why shouldn't it be able to do the same in WinUI3?

[softworkz]

To clarify:

• WebView2 with WinUI2 composition=> Transparency working

This is about the WinUI2 WebView2 control, which is open source and included right here in this repo: https://github.com/microsoft/microsoft-ui-xaml/tree/main/dev/WebView2

• WebView2 with WinUI3 composition => Transparency not working

The WinUI3 WebView2 control (not open source)

[JJBrychell]

My apologies for the confusion. I was referring to the WinUI WebView2 control, not the Edge Webview2 component.

[softworkz]

My apologies for the confusion. I was referring to the WinUI WebView2 control,

Which one? And what's the actual problem?

[SnowNooDLe]

My apologies for the confusion. I was referring to the WinUI WebView2 control, not the Edge Webview2 component.

If it's WinUI2 for UWP and WebView2 combination, then you can do:

Environment.SetEnvironmentVariable("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "00000000");

inside the xaml.cs, and did right after the InitializeComponent() gets called, and it works fine :+1:

MS Reference and it says SetVariable, but this method doesn't seem to exist anymore.

[softworkz]

If it's WinUI2 for UWP and WebView2 combination, then you can do:

Environment.SetEnvironmentVariable("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "00000000");

Yes, this is working in WinUI3 as well. You can change the background color this way. You can also set it to transparent. When you do this, the WebView will have the background of the application window, which means that it will even be light or dark depending on the theme of the application. But it won't be really transparent in a way that you can see other visuals with lower z-order behind it. (at least that's working with the way, demonstrated by @GetGet99 here).

This means that the problem is not about setting the backcolor to transparent. The problem is that WinUI3 composition is for some reason unable to render the WebView2's visual with transparency.

[WelterDevelopment]

This means that the problem is not about setting the backcolor to transparent. The problem is that WinUI3 composition is for some reason unable to render the WebView2's visual with transparency.

Exactly, this is what I meant and described in the section "Describe the bug". I am sorry that the wording of my issue title is misleading, I will concretize it further.

[Laftek]

any update on this?

[softworkz]

I found a post where somebody is at least admitting that it's a problem with the WinUI3 composition design: https://github.com/microsoft/microsoft-ui-xaml/issues/8130#issuecomment-1462934343

[bawkee]

2024 enters the chat. Is there any update? WebView2 is the one thing IMO that redeems WinUI3, it would be reasonable to have it fully integrated with backdrops, tints and all the other gizmos offered by WinUI3...

[AlexRUiLs]

I am working on UWP app with WebView2 and also stacked with this problem. How to make WebView2 background transparent instead of white?

[softworkz]

2 is the one thing IMO that redeems WinUI3, it would be reasonable to have it fully integrated with backdrops, tints and all the other gizmos offered by WinUI3...

This topic and problem is about WinUI3. WebView2 transparency is working fine in UWP apps. Just run this on application start:

Environment.SetEnvironmentVariable("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "00FFFFFF");

[AlexRUiLs]

2 is the one thing IMO that redeems WinUI3, it would be reasonable to have it fully integrated with backdrops, tints and all the other gizmos offered by WinUI3...

This topic and problem is about WinUI3. WebView2 transparency is working fine in UWP apps. Just run this on application start:

Environment.SetEnvironmentVariable("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "00FFFFFF");

I tried it with my UWP WebView2 and it doesn't work, the background stays white but not transparent. What is wrong? Can someone please assist?

[mhrastegari]

Wow It's been 3 years? 😅

[Crypties]

Wow It's been 3 years? 😅

Airspace issues with WebView is from Internet Explorer ~6. Different battle, same war.