BlazorWebView/WebView2 Transparent background not transparent on Windows #14185

StonedHackerman · 2023-03-24T14:48:01Z

Description

What I did

I created a project from the default template ".NET MAUI Blazor App". In the MainPage I created a Label and a BlazorWebView which I shifted up a bit, so that it partly convers the Label. Then, I did these steps to make sure the page displayed in the BlazorWebView has transparent background:

Set the page's body background-color to transparent with CSS

html, body {
    background-color: transparent;
}

Set the BlazorWebView's backgroud color to transparent

<BlazorWebView x:Name="BlazorWebView" HostPage="wwwroot/index.html" BackgroundColor="Transparent" Margin="0,-10,0,0" MinimumHeightRequest="20">

Explicitly set the internal WebView2's DefaultBackgroundColor to transparent in an OnLoaded event handler

private void MainPage_OnLoaded(object sender, EventArgs e)
    {
        #if WINDOWS
        
        var webView = (BlazorWebView.Handler.PlatformView as Microsoft.UI.Xaml.Controls.WebView2);

        webView.DefaultBackgroundColor = Windows.UI.Color.FromArgb(0, 0, 0, 0);

        #endif
    }

Displayed a Razor page directly, containing only a single P element, to make sure no other HTML elements are blocking the transparency

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:pages="clr-namespace:TransparencyTest.Pages"
             x:Class="TransparencyTest.MainPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}"
             Loaded="MainPage_OnLoaded">

    <StackLayout>
        <Label>This is a MAUI label</Label>

        <BlazorWebView x:Name="BlazorWebView" HostPage="wwwroot/index.html" BackgroundColor="Transparent" 
                       Margin="0,-10,0,0" MinimumHeightRequest="20">
            <BlazorWebView.RootComponents>
                <RootComponent Selector="#app" ComponentType="{x:Type pages:Index}" />
            </BlazorWebView.RootComponents>
        </BlazorWebView>
    </StackLayout>

</ContentPage>

Index.razor

@page "/"

<p style="margin: 0">This is a P from Blazor</p>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <title>TransparencyTest</title>
    <base href="/" />

    <link href="css/app.css" rel="stylesheet" />
    <link href="TransparencyTest.styles.css" rel="stylesheet" />
</head>

<body>

    <div class="status-bar-safe-area"></div>

    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webview.js" autostart="false"></script>

</body>

</html>

Result on Android (correct expected behavior)

On Android, I can correctly see the text in the P element on the Razor page inside a BlazorWebView overlayed on top of the MAUI Label

Result on Windows (incorrect behavior)

On Windows, the background is not transparent

The color displayed must be somehow related to the current Windows theme, because when I change my Windows theme from Dark to Light, the BlazorWebView's background color changes too

According to this link to Microsoft's official documentation, setting a WebView2's DefaultBackgroundColor to transparent is supported:
https://learn.microsoft.com/en-us/dotnet/api/microsoft.web.webview2.core.corewebview2controller.defaultbackgroundcolor?view=webview2-dotnet-1.0.864.35#microsoft-web-webview2-core-corewebview2controller-defaultbackgroundcolor

Which leads a logical conclusion that this is a bug, and the background should be transparent, like on Android.

Platforms/versions

I'm using VS Community 2022 v17.5.3 and the latest MAUI workload

The project contains these TargetFrameworks: (just the defaults from the template)

<TargetFrameworks>net7.0-android;net7.0-ios;net7.0-maccatalyst</TargetFrameworks>
<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net7.0-windows10.0.19041.0</TargetFrameworks>

This is the output from dotnet workload list

Installed Workload Id      Manifest Version       Installation Source
---------------------------------------------------------------------
maui-windows               7.0.59/7.0.100         VS 17.5.33516.290
maui-maccatalyst           7.0.59/7.0.100         VS 17.5.33516.290
maccatalyst                16.2.1024/7.0.100      VS 17.5.33516.290
maui-ios                   7.0.59/7.0.100         VS 17.5.33516.290
android                    33.0.26/7.0.100        VS 17.5.33516.290
ios                        16.2.1024/7.0.100      VS 17.5.33516.290
wasm-tools                 7.0.4/7.0.100          VS 17.5.33516.290
maui-android               7.0.59/7.0.100         VS 17.5.33516.290

Steps to Reproduce

Download the code from the example repo
Run on Windows
See bug

Link to public reproduction project repository

https://github.com/StonedHackerman/MauiBlazorWebViewTransparencyTest/tree/main/TransparencyTest

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

net7.0-windows10.0.19041.0

Did you find any workaround?

No, nothing I tried worked and no amount of Googling helped

Relevant log output

No response

The text was updated successfully, but these errors were encountered:

Eilon · 2023-03-24T16:03:02Z

This might be a limitation of the WebView2 control on WinUI, which is what .NET MAUI uses on Windows. We'll have to check.

StonedHackerman · 2023-03-24T16:07:27Z

It also seems to work under WPF (which also uses the same WebView2 no?), e.g. as this StackOverflow post shows:
https://stackoverflow.com/questions/67838739/how-to-use-transparency-in-webview2

Eilon · 2023-03-24T16:10:32Z

Indeed, I recall the WPF issue, so I wonder if the same type of issue exists on WinUI as well. I found this issue, which seems to indicate that others have the same issue on WinUI: microsoft/microsoft-ui-xaml#6527

Eilon · 2023-03-24T16:13:09Z

The other issue suggests that there could be a fairly easy workaround: microsoft/microsoft-ui-xaml#6527 (comment)

So you could easily try that in an #if WINDOWS section in your app's MauiProgram.cs.

StonedHackerman · 2023-03-24T16:26:54Z

I inserted these lines in MauiProgram.cs at the beginning of the CreateMauiApp() method

#if WINDOWS

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

#endif

But the result is still the same. I also tried inserting this in the constructor of MainPage and the constructor of App in Platforms/Widows/App.xaml.cs but nothing ever changed

Eilon · 2023-03-24T17:11:42Z

Hmm then possibly the workaround just doesn't work? Because that's otherwise the same as what the others were saying in the WebView2 thread.

StonedHackerman · 2023-03-24T17:13:09Z

At least on my machine ™ it doesn't. Edit: tried on another machine, doesnt work either

Eilon · 2023-03-24T17:24:04Z

Hmm yeah I don't see it working either in my test.

ghost · 2023-03-27T16:31:33Z

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

jinxinjuan · 2023-06-16T06:53:08Z

Verified this issue with Visual Studio Enterprise 17.7.0 Preview 1.0. Can repro on windows platform with sample project. https://github.com/StonedHackerman/MauiBlazorWebViewTransparencyTest/tree/main/TransparencyTest.

mhrastegari · 2023-08-21T19:20:29Z

So how's the new Outlook doing it? it's web based too.

Eilon · 2023-08-24T18:52:31Z

So how's the new Outlook doing it? it's web based too.

I'm not sure how they do it, but I thought the whole app (except maybe the title bar?) was a WebView, so maybe they don't even need to use transparency? Or also, perhaps it's hosted natively, which has somewhat different behaviors compared to how it's hosted on WindowsAppSDK (WinUI) and WPF/WinForms.

SimenCTan · 2023-10-26T03:48:05Z

Have there been any updates regarding this issue

SimenCTan · 2023-10-27T03:37:11Z

to resolve the issue on macOS

  public static void ModifyBlazorWebView() 
  {
      ViewHandler.ViewMapper.AppendToMapping(nameof(IView.Background), (handler, view) =>
      {
#if MACCATALYST || IOS
          if (handler.PlatformView is WKWebView wv)
          {
              wv.Opaque = false;
              wv.BackgroundColor = UIColor.Clear;
          }
#endif
      });
  }

everharder · 2024-01-30T08:05:17Z

Any news on this?

shyqrirama · 2024-02-23T01:08:47Z

This Solution seems to work, create a new control that inherits the base class BlazorWebView, and then based on platform(when on windows) add init event. Add the below code and the issue seems to go away.

private async void BlazorWebView_BlazorWebViewInitialized(object? sender, Microsoft.AspNetCore.Components.WebView.BlazorWebViewInitializedEventArgs e)
{
e.WebView.DefaultBackgroundColor = Windows.UI.Color.FromArgb(0, 255, 255, 255);
await e.WebView.EnsureCoreWebView2Async();
}

everharder · 2024-02-23T07:23:42Z

@shyqrirama Unfortanetly the solution doesn't work for me.
In the screenshot, the expected background color for the embedded website is blue (because that's the background color of the MainPage).

Can you maybe provide a minimal working example of your solution?

mkArtakMSFT · 2024-04-05T21:21:40Z

Closing as this is not something we control: microsoft/microsoft-ui-xaml#6527

StonedHackerman added the t/bug Something isn't working label Mar 24, 2023

Eilon added the area-blazor Blazor Hybrid / Desktop, BlazorWebView label Mar 24, 2023

danroth27 added the external label Mar 27, 2023

danroth27 added this to the Backlog milestone Mar 27, 2023

jinxinjuan added s/triaged Issue has been reviewed s/verified Verified / Reproducible Issue ready for Engineering Triage labels Jun 16, 2023

BlizzCrafter mentioned this issue Aug 3, 2023

BlazorWebView transparent background impossible to set BlizzCrafter/MonoGame.Forms#45

Open

Eilon mentioned this issue Aug 30, 2023

Cannot add Mica backdrop to Maui Blazor hybrid app #16874

Closed

Eilon removed this from the Backlog milestone Dec 15, 2023

samhouts added the platform/windows 🪟 label Feb 1, 2024

mkArtakMSFT closed this as not planned Won't fix, can't repro, duplicate, stale Apr 5, 2024

github-actions bot locked and limited conversation to collaborators May 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

BlazorWebView/WebView2 Transparent background not transparent on Windows #14185

BlazorWebView/WebView2 Transparent background not transparent on Windows #14185

StonedHackerman commented Mar 24, 2023

Eilon commented Mar 24, 2023

StonedHackerman commented Mar 24, 2023

Eilon commented Mar 24, 2023 •

edited

Eilon commented Mar 24, 2023

StonedHackerman commented Mar 24, 2023

Eilon commented Mar 24, 2023

StonedHackerman commented Mar 24, 2023 •

edited

Eilon commented Mar 24, 2023

ghost commented Mar 27, 2023

jinxinjuan commented Jun 16, 2023

mhrastegari commented Aug 21, 2023 •

edited

Eilon commented Aug 24, 2023

SimenCTan commented Oct 26, 2023

SimenCTan commented Oct 27, 2023

everharder commented Jan 30, 2024

shyqrirama commented Feb 23, 2024

everharder commented Feb 23, 2024

mkArtakMSFT commented Apr 5, 2024

BlazorWebView/WebView2 Transparent background not transparent on Windows #14185

BlazorWebView/WebView2 Transparent background not transparent on Windows #14185

Comments

StonedHackerman commented Mar 24, 2023

Description

What I did

Result on Android (correct expected behavior)

Result on Windows (incorrect behavior)

Platforms/versions

Steps to Reproduce

Link to public reproduction project repository

Version with bug

Last version that worked well

Affected platforms

Affected platform versions

Did you find any workaround?

Relevant log output

Eilon commented Mar 24, 2023

StonedHackerman commented Mar 24, 2023

Eilon commented Mar 24, 2023 • edited

Eilon commented Mar 24, 2023

StonedHackerman commented Mar 24, 2023

Eilon commented Mar 24, 2023

StonedHackerman commented Mar 24, 2023 • edited

Eilon commented Mar 24, 2023

ghost commented Mar 27, 2023

jinxinjuan commented Jun 16, 2023

mhrastegari commented Aug 21, 2023 • edited

Eilon commented Aug 24, 2023

SimenCTan commented Oct 26, 2023

SimenCTan commented Oct 27, 2023

everharder commented Jan 30, 2024

shyqrirama commented Feb 23, 2024

everharder commented Feb 23, 2024

mkArtakMSFT commented Apr 5, 2024

Eilon commented Mar 24, 2023 •

edited

StonedHackerman commented Mar 24, 2023 •

edited

mhrastegari commented Aug 21, 2023 •

edited