Can I remove the white rectangle when initializing the WebView2?

[ajtruckle]

On my second tab page I have a browser control, and I initialize the tab control when the tab is selected:

Recording.2025-02-23.114147.mp4

Code:

void CAboutDlg::OnTabSelected(TabCtrl* ctrl, TabCtrl::HTAB tab)
{
	const int sel = ctrl->GetTabIndexByHandle(tab);

	if (sel == 1)
	{
		m_pageCredits.InitialiseWebPreview2();

		return;
	}
}

And in the tab class:

void CCreditsPage::InitialiseWebPreview2()
{
	if (m_pWebBrowser) return;

	m_lblHtmlPreview.GetWindowRect(m_rctHtmlPreview);
	ScreenToClient(m_rctHtmlPreview);

	m_pWebBrowser = std::make_unique<CWebBrowser>();
	if (m_pWebBrowser != nullptr)
	{
		m_pWebBrowser->CreateAsync(
			WS_VISIBLE | WS_CHILD,
			m_rctHtmlPreview,
			this,
			1,
			[&]() {
				m_pWebBrowser->SetParent(this);
				m_pWebBrowser->EnableContextMenus(false);
				m_pWebBrowser->SetPreferredColorScheme(IsUsingDarkMode()
					? COREWEBVIEW2_PREFERRED_COLOR_SCHEME_DARK
					: COREWEBVIEW2_PREFERRED_COLOR_SCHEME_LIGHT
				);
				m_pWebBrowser->Navigate(theApp.GetCommonAppDataFolder() + L"credits.html", nullptr);
			});
	}
}

If you watch the video you will see the momentary white rectangle. How can I overcome this?

Note that I am using a media query to render the HTML in dark mode:

        /* Dark mode for screens only */
        @media screen and (prefers-color-scheme: dark) {
            body {
                background-color: #121212;
                color: #e0e0e0;
            }

            h1 {
                color: #ffffff;
                border-color: #ffffff;
            }

            h2 {
                background-color: #1e1e1e;
                color: #ffffff;
            }

            table {
                border-color: #ffffff;
            }

            td, th {
                border-color: #ffffff;
                background-color: #1e1e1e;
                color: #e0e0e0;
            }

            table tbody tr:hover td {
                background: #333333;
                color: #ffffff;
            }

            .container {
                background-color: #1e1e1e;
                color: #e0e0e0;
            }

            a {
                color: #8ab4f8;
            }

                a:hover {
                    color: #ffab40;
                }

            li {
                color: #e0e0e0;
            }

            hr {
                border-color: #ffffff;
            }
        }

Thank you for your help.

[ajtruckle]

Digging deeper into the class I am using to invoke WebView2 I see:

PCTSTR CWebBrowser::GetWindowClass()
{
	static PCTSTR windowClass = []
	{
		static TCHAR const* className = L"EdgeBrowserHost";

		WNDCLASSEX wcex;
		wcex.cbSize = sizeof(WNDCLASSEX);

		wcex.style = CS_HREDRAW | CS_VREDRAW;
		wcex.lpfnWndProc = WndProcStatic;
		wcex.cbClsExtra = 0;
		wcex.cbWndExtra = 0;
		wcex.hInstance = AfxGetInstanceHandle();
		wcex.hIcon = nullptr;
		wcex.hCursor = LoadCursor(nullptr, IDC_ARROW);
		wcex.hbrBackground = (HBRUSH)(COLOR_WINDOW + 1);
		wcex.lpszMenuName = nullptr;
		wcex.lpszClassName = className;
		wcex.hIconSm = nullptr;

		ATOM result = RegisterClassEx(&wcex);
		if (result == 0)
		{
			[[maybe_unused]] DWORD lastError = ::GetLastError();
		}

		return className;
	}();

	return windowClass;
}

It is using COLOR_WINDOW for the background. I think this should adjust based on if the browser is light or dark.

[ajtruckle]

I see that my code is based on the official sample:

// Register the Win32 window class for the app window.
PCWSTR AppWindow::GetWindowClass()
{
    // Only do this once
    static PCWSTR windowClass = []
    {
        static WCHAR windowClass[s_maxLoadString];
        LoadStringW(g_hInstance, IDC_WEBVIEW2APISAMPLE, windowClass, s_maxLoadString);

        WNDCLASSEXW wcex;
        wcex.cbSize = sizeof(WNDCLASSEX);

        wcex.style = CS_HREDRAW | CS_VREDRAW;
        wcex.lpfnWndProc = WndProcStatic;
        wcex.cbClsExtra = 0;
        wcex.cbWndExtra = 0;
        wcex.hInstance = g_hInstance;
        wcex.hIcon = LoadIcon(g_hInstance, MAKEINTRESOURCE(IDI_WEBVIEW2APISAMPLE));
        wcex.hCursor = LoadCursor(nullptr, IDC_ARROW);
        wcex.hbrBackground = (HBRUSH)(COLOR_WINDOW + 1);
        wcex.lpszMenuName = MAKEINTRESOURCEW(IDC_WEBVIEW2APISAMPLE);
        wcex.lpszClassName = windowClass;
        wcex.hIconSm = LoadIcon(g_hInstance, MAKEINTRESOURCE(IDI_SMALL));

        RegisterClassExW(&wcex);
        return windowClass;
    }();
    return windowClass;
}

It would be nice if the official sample catered for a more suitable background colour when using dark mode.