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.

[RuddyOne]

Has anyone got a fix for this with MAUI and WinUI3?

Also having this issue, in dark mode I get a flash of black (dark background) before the webview is loaded. I need this to at least be white (the pages background color).

[softworkz]

Also having this issue, in dark mode I get a flash of black (dark background) before the webview is loaded. I need this to at least be white (the pages background color).

You can set the background color via environment variable. This should get effective even before it becomes visible (other than the XAML property. Like this:

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

[softworkz]

Sorry, the above is setting to transparent, which only works with hWnd based webviews, for setting it to black, you need to set FF000000

[RuddyOne]

Sorry, the above is setting to transparent, which only works with hWnd based webviews, for setting it to black, you need to set FF000000

Thank you for the reply. I have been trying the environment variable but it seems to have no affect. I need to be white so I guess thats:

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

I have attempted this as the first line in CreateMauiApp and also before the WebView is created, doesn't seem to do anything. I still get the brief black flicker before the webview loads in. Any ideas?

[softworkz]

Not exactly sure where it comes from then. You mentioned dark mode. Theme can be controlled with this:

CoreWebView2.Profile.PreferredColorScheme

But I'm not sure whether you're already seeing content in the webview (to which this applies) or whether that background is from the control even before the webview is producing content. What's the background of your app window if you don't do anything? It should be black or dark in dark mode. Before it loads, the webview's background should be the same as the window background, so you normally wouldn't notice it. Do you underlay a different background?

[softworkz]

Try this (don't set the Source property in XAML):

        public MainWindow()
        {
            this.InitializeComponent();

            _ = this.InitWevView();
        }

        private async Task InitWevView()
        {
            this.WebView.Visibility = Visibility.Collapsed;

            await this.WebView.EnsureCoreWebView2Async();

            await Task.Delay(500);

            this.WebView.Visibility = Visibility.Visible;

            this.WebView.Source = new Uri("https://microsoft.com");
        }

[RuddyOne]

Not exactly sure where it comes from then. You mentioned dark mode. Theme can be controlled with this:

CoreWebView2.Profile.PreferredColorScheme

But I'm not sure whether you're already seeing content in the webview (to which this applies) or whether that background is from the control even before the webview is producing content. What's the background of your app window if you don't do anything? It should be black or dark in dark mode. Before it loads, the webview's background should be the same as the window background, so you normally wouldn't notice it. Do you underlay a different background?

These are great solutions, but for me they don't appear to work.

I have been trying to narrow it down and found that if the webview is added to the view it shows the flash of black. If the webview is on the page when loaded it doesn't. I have created a demo project for this and can replicate it.

Not sure if this is a different issue or the same as this. For me it seems like the same since I can find no way to get rid of it. Any more ideas would be appreciated.

[softworkz]

I have been trying to narrow it down and found that if the webview is added to the view it shows the flash of black. If the webview is on the page when loaded it doesn't. I have created a demo project for this and can replicate it.

Try to add it to the tree under a parent that has visibility=collapsed. Then proceed like in the code snipped above, and finally set the parent to visible.

[RuddyOne]

I have been trying to narrow it down and found that if the webview is added to the view it shows the flash of black. If the webview is on the page when loaded it doesn't. I have created a demo project for this and can replicate it.

Try to add it to the tree under a parent that has visibility=collapsed. Then proceed like in the code snipped above, and finally set the parent to visible.

I have now tried that but as I am using MAUI its a little different. I did try with no luck, when the parent shows it still flashing. Even setting the parent to Opacity 0.01 and it still flashes.

However, you gave me an idea, and its not a good fix but seems to work. I have a View overlapping the webview, after a delay I fade out the overlapping View. Super hacky but at the moment its the only fix I have.

I will keep messing with this and see if I have anything better but this might be the best I can do.

Putting the code here just incase anyone needs a hacky solution:

            var webView = new WebView()
            {
                Source = new HtmlWebViewSource()
                {
                    Html = html,
                }
            };

            var overlay = new ContentView
            {
                BackgroundColor = Colors.White,
            };

            // Grid to hold the webview and overlapping view 
            var grid = new Grid()
            {
                webView,
                overlay
            };

            theGrid.Children.Add(grid);

            await Task.Delay(1000);
            await overlay.FadeTo(0);
            overlay.IsVisible = false; // We dont want to block inputs

[softworkz]

If you can't use the explicit way (EnsureCoreWebView2) and the webview doesn't start loading before it's effectively visible (all parents visible), you can try to just move it off-screen, for example by applying a right margin of 10000.

In all cases/attempts, I would always get the WebView control in place first, without setting any source. See how it goes without source and only set the source upon some button click for testing and see whether the flickering happens when adding or when setting the source.

[RuddyOne]

If you can't use the explicit way (EnsureCoreWebView2) and the webview doesn't start loading before it's effectively visible (all parents visible), you can try to just move it off-screen, for example by applying a right margin of 10000.

In all cases/attempts, I would always get the WebView control in place first, without setting any source. See how it goes without source and only set the source upon some button click for testing and see whether the flickering happens when adding or when setting the source.

Another good idea, to move it off screen. Might give that ago.

I have tried without a source and the webview still flashes, seems to be webview a view is added to a view it flashes.

I don't seem to have an event that will tell me when it has loaded my content (since its local HTML its rendering). So I have to guess a delay to make sure the user doesn't see it... Not ideal at all.

I am still working at it to come up with something better, by all means keep throwing ideas at me and I can give them a go.

Small update:

Turns out there is an event Navigated

           webView.Navigated += async (s, e) =>
           {
               await overlay.FadeTo(0);
               overlay.IsVisible = false;
           };

This appears to get rid of the need for a delay, now I will try to push it off screen. Then its 2 less views to render.

[softworkz]

I have tried without a source and the webview still flashes, seems to be webview a view is added to a view it flashes.

Okay, that is good, then you can let it flash first and then set the source. You can also try to set the height to 0 and see whether you get past the flashing like that. Otherwise, 1x1 size should work at least.

You might want to encapsulate the WebView inside a user control. When targeting other platforms as well, you might not want to apply the same things on other platforms, so it's useful to have it encapsulated. This might also help to move it off-screen when you don't get it off in the main layout.

The Navigated event doesn't tell you when the view is really loaded completely. If you know the content and it's always the same, you could use the method for executing javascript code in the browser. Specify a one-liner with an appropriate check and execute it until trrue. This should work in all platform-specific webviews.

Finally, you can always extend the webview control handler from MAUI to get access to everything that is available in WinUI3 directly.