WebView2 windows are blank when created in the background

[champnic]

Version
SDK: 1.0.705.50 (NuGet Microsoft.Web.WebView2 package)
Runtime: Microsoft Edge Version 89.0.774.45
Toolset: Visual Studio 2019 (v16.8.4)
Framework: Win32
OS: Win10

Description
I'm having the same issue and it's not related to #1044. What I was able to find so far is that the issue seems to happen most frequently when I create the WebView in a window that is not shown.

The fun thing is that even on the bug side Edge is running in the background and I can interact with the API. E.g. fetch the page source code, even eval a script but it won't ever render anything on the screen nor react to right mouse clicks.

Workaround
My current workaround is to re-create the WebView once my application is shown and visible on-screen with a 500ms delay. That seems to do it. So I think there is something wrong with creating a webview in the background.

Originally posted by @dominicletz in #1042 (comment)

AB#32169221

[cuiliang]

you may try if webView.UpdateWindowPos(); can fix the problem.

[dominicletz]

Ok, how is that better than my workaround of re-creating the view?

It would be great if there would be a way to

1. Detect that the problem exists -- somehow all the APIs work, so even though the users don't see a thing I can't find out from the API at the moment.
2. Not having the problem at startup at all would be great.

Best

[champnic]

We'll work on getting the underlying bug fixed. In the meantime, if the workaround suggested by @cuiliang works, it is probably simpler and more performant than recreating the whole WebView2.

[champnic]

@dominicletz Can you share some code around where you create the WebView2 when in the background, parenting the HWNDs, and then making it visible? A repro app would be ideal if possible. Thanks!

[topozepe]

I was about to submit a new issue, but looking at this #1077 I think that the root cause could be the same as mine. Could you please confirm as I describe below? Many thanks,

I'm attaching a simple repro app - MFCApplication1-Source.zip, that works as follows:

1. It is an MFC dialog that contains an CMFCTabCtrl and two buttons: (1) add a tab and make it active; (2) add a tab but don't make it active/visible;
2. Each tab added to the tab control will contain an .Net UserControl
3. The .Net control contains an WebView2 WinForms control and a Listbox thay will list the WebView2 events (CoreWebView2InitializationCompleted, NavigationStarting and NavigationCompleted)

When the app is opened:

1. It adds a 1st tab - the WebView2 control and its events are displayed OK:
   
2. Clicking the button "Add tab with focus", a 2nd tab is added and set active/visible - the WebView2 control and its events are displayed OK.
3. Clicking the button "Add tab without focus", a 3rd tab is added, but focus remains on the current tab (2nd)
4. Selecting manually the 3rd tab, we can see that the navigation events are all there, but the WebView2 control is blank / not rendered:
   

Inspecting with Spy++ we can see that:

1. Refer to attached image; the left side is the good case and the right the bad)
2. The window Chrome_RenderWidgetHostHWND (named "Chrome Legacy Window") it is missing in the bad case.
3. In the bad case it can also be observed that the Chrome_WidgetWin_0 and its child Chrome_WidgetWin_1 are missing the WS_VISIBLE window style.
   

Let me know if more input is needed.

[nabils]

I am encountering this too. I create WPF windows containing a WebView component in hidden state. When making the windows visible they are blank. Only way round this is to show the window just before I create and initialise the WebView instance and then hide.

[champnic]

Thanks @topozepe for the great repro app! I think I was able to root cause the issue, and we should hopefully have a fix soon.

One workaround for now is to manually toggle WebView2.Visible after the control has navigated. This should cause OnVisibleChanged to fire again and we'll correctly set the visibility on the controller. For example, the following code change fixed the "Add tab without focus" case:

        private void webView21_NavigationCompleted(object sender, Microsoft.Web.WebView2.Core.CoreWebView2NavigationCompletedEventArgs e)
        {
            listBox1.Items.Add($"{DateTime.Now.ToLongTimeString()} nav completed");

            webView21.Visible = false;
            webView21.Visible = true;
        }

[topozepe]

Thanks @champnic for the great workaround! 👍
I've already tried that before, but it was in CoreWebView2InitializationCompleted event handler and didn't work.

[champnic]

This is now fixed in 1.0.902-prerelease SDK. Thanks!

[ShaunLoganOracle]

FWIW, I was encountering this same issue using WinForms with SDK 1.0.705.50, RT 91.0.864.41. The 2nd and subsequent WebView2 instances that I created (all sharing the same User Data Folder), just rendered a gray background. I tried the workaround of toggling the visibility of the WinForm WebView2 to False then back to True before rendering content (NavigateToString) for the first time in each instance. That works: I now see the expected content instead of the gray background.
This was all in the context of an Excel add-in where the WebView2 instances are hosted by Office Task panes.

[Symbai]

This is now fixed in 1.0.902-prerelease SDK. Thanks!

Can someone else confirm that it's really fixed? Because for me it still doesn't work. I still have to set visibility to false and true before WebView2 shows up.

[champnic]

@Symbai What SDK and Runtime are you using where you still see this?

[Symbai]

@champnic .NET5 and 1.0.902-prerelease SDK. I have Edge Canary Version 94.0.979.0 installed and Webview2 runtime Version 92.0.902.67

The exact order is:

1. Application is shown on the desktop
2. Application shows a waiting screen
3. On the WPF window Loaded event I call an async method I add my user controls containing webview2 controls in the end to a WPF Grid control which visibility is set to Hidden. User still sees the waiting screen
4. In code I have to "activate" the user controls which makes sure they are part of the visual tree and then I have to call UpdateLayout on each of them.
5. I call EnsureCoreWebView2Async on each of these webview2 controls
6. On a NavigationCompleted of such a webview2 control I remove the loading screen from the visual tree and set my Grid containing the webview2 controls to visible

Without step 4 all I see are white/blank screens. Please keep in mind that webview2 controls do exist and work, otherwise the NavigationCompleted event wouldn't have been raised. Also if I manually switch between these docking windows, which does the same as on step 4 basically switches the visibility, the webview2 control begin to show the websites. With step 4, I see the web pages they are navigated to right on start which is what i want.

So yeah I have to explicit refresh the visibility otherwise I get a blank screen.

[champnic]

@Symbai Let me see if I can reproduce the problem using those steps!

[champnic]

I've confirmed that use case has not been fixed, reactivating this item. Thanks!

[champnic]

@Symbai I think you are seeing #1094. There's a different workaround in that issue if you'd prefer to try that one, but your existing workaround also seems to fix it. Reclosing this issue.

[zeltrax00]

you may try if webView.UpdateWindowPos(); can fix the problem.

What API am I supposed to call if I am using C++ ?

[champnic]

@zeltrax00 This particular bug was specific to our .NET controls. If you are seeing an issue with the C++ Win32 control, please open that as a new issue and we can dig into it. Thanks!

[criddell]

@zeltrax00 Did you find or create a similar issue for C++?

I didn't find anything, but @champnic's comment1 made me go looking for something similar in the C++ interfaces.

I found that if I call ICoreWebView2Controller::put_IsVisible(BOOL) with TRUE in my OnCreateWebViewControllerCompleted code, the problem may be fixed (we're still testing it here).