Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Question] - How do I get rid of the white background of the BlazorWebview during load? #44

Open
geocine opened this issue Oct 29, 2021 · 9 comments

Comments

@geocine
Copy link

geocine commented Oct 29, 2021

See this demo below, to understand behavior while window is opening

  • gray -> window load
  • white -> BlazorWebView loading
  • pink -> index.html load

webview

I tried adding "Aqua" Background to the BlazorWebView but still the White view is showing

  • aqua-> BlazorWebview init
  • white -> BlazorWebView loading
  • pink -> index.html load

webview2

@jspuij
Copy link
Owner

jspuij commented Oct 30, 2021

Pretty sure the white background is the browser window, before the blazor HTML is loaded. As I don't actively maintain this codebase anymore and MBB and .net 6 are the spiritual successors to TwokaB, I'd say the easiest solution is either to overlay or hide the control until everything is loaded, or adapt the code to try and set this background colour of the embedded browser window.

@geocine
Copy link
Author

geocine commented Oct 30, 2021

For the second image you can see I already set the BlazorWevbiew "Background" property to "aqua" but still a white background is showing after that "aqua" background which I have set.

FYI I forgot the exact syntax and I'm not infront of the PC rn, but ii already looks something like this

<BlazorWebview Background="aqua" />

Then the "pink" color is coming from the "index.html" page

<style>
body {
  background: "pink"; 
}
</style>

@adds39939
Copy link

@geocine did you end up finding a solution for this?

@SqueakyBed
Copy link

I am interested too.

It doesn't work even after changing the BlazorWebView bg and style colors.

@geocine
Copy link
Author

geocine commented Nov 4, 2022

I still don't have a solution unfortunately

@KrystianLesniak
Copy link

Any findings yet?

@SqueakyBed
Copy link

SqueakyBed commented Sep 3, 2023

My solution.

    ViewHandler.ViewMapper.AppendToMapping(nameof(IView.Background), (handler, view) =>
    {
        if (handler.PlatformView is WebView2 wv)
        {
            //Change the background of the web browser to the current theme color to prevent unwanted flashing when refreshing the page. 
            wv.DefaultBackgroundColor = Windows.UI.Color.FromArgb(Alpha, Red, Green, Blue);
        }
    });

@SimenCTan
Copy link

Have there been any updates regarding this issue

@SimenCTan
Copy link

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
      });
  }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants