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.

[ajtruckle]

THis is what I am doing for now:

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

		if (DarkModeTools::InvokeUseDarkModeFunction())
		{
			static auto hbr = CreateSolidBrush(DarkModeTools::kDarkControlBackgroundColor);
			wcex.hbrBackground = hbr;
		}
		else
			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;
}

But if there could be a built-in way to do this ... I'd be interested

[ajtruckle]

#5269 (comment)

[ajtruckle]

@venky8951 Please see the linked discussion that relates to the same issue.

[ajtruckle]

I think I just as well leave it as I already have it. It works. But thank you all the same. Sent from Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ From: jls28 ***@***.***> Sent: Thursday, June 12, 2025 5:11:45 PM To: MicrosoftEdge/WebView2Feedback ***@***.***> Cc: ajtruckle ***@***.***>; Author ***@***.***> Subject: Re: [MicrosoftEdge/WebView2Feedback] Can I remove the white rectangle when initializing the WebView2? (Issue #5123) [https://avatars.githubusercontent.com/u/40491400?s=20&v=4]jls28 left a comment (MicrosoftEdge/WebView2Feedback#5123)<#5123 (comment)> I think this is white at start because the starting page "about:blank" is always white (even with msEdge) and not transparent. When a webview2 window start it always and immediatly display a "about:blank" page during the loading time of the first page. If you found a way to make the page "about:blank" dark, I agree it could be usefull for a dark mode. Perhaps one possible solution could be to create the webview2 windows not visible at start only and put visible when a page other than "about:blank" go on (at sourcechanged event). Or I am wrong ? — Reply to this email directly, view it on GitHub<#5123 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AB45RM2I2PS4RJNTFEYKTR33DGREDAVCNFSM6AAAAABXWGSIIOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDSNRXGQ2DENZSGI>. You are receiving this because you authored the thread.Message ID: ***@***.***>