How can I get the WebBrowser control to show modern contents?

Note: The post is about WebBrowser control, however, for all the new
.NET projects the main solution is using
WebView2.
To learn more, take a look at this post:

WebBrowser Control

The WebBrowser control uses the same Internet Explorer version which is installed on your OS but it doesn’t use the latest document mode by default and shows content in compatibility mode.

Symptom – As a symptom, the site works properly in Internet Explorer or other browsers, but WebBrowser control doesn’t show the site well and for some sites it shows script errors.

Solution – You can tell the WebBrowser control to use the latest document mode without compatibility mode in WebBrowser control. You can follow instructions here to disable the setting using registry.
[Reference: Browser Emulation]

Apply Browser Emulation setting using code

If you want to apply the settings using code, run the following code once:

using (var key = Microsoft.Win32.Registry.CurrentUser.OpenSubKey(
    @"Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION",
    true))
{
    var app = System.IO.Path.GetFileName(Application.ExecutablePath);
    key.SetValue(app, 11001, Microsoft.Win32.RegistryValueKind.DWord);
    key.Close();
}

In above code, I’ve used 11001 which means IE11 Edge mode.

Internet Explorer 11. Webpages are displayed in IE11 edge mode,
regardless of the declared !DOCTYPE directive. Failing to declare a
!DOCTYPE directive causes the page to load in Quirks.

Apply the Browser Emulation setting manually

Open Registry editor and browse HKEY_CURRENT_USER, go to the following key:

Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION

Add the following values:

"YourApplicationFileName.exe"=dword:00002af9
"YourApplicationFileName.vshost.exe"=dword:00002af9

(In older versions of Visual Studio you needed to add vshost.exe value as well, when you run your program in Visual Studio.)

To create entries right click on an empty area of the right pane, then in the window which appears after selecting dword value, choose hexadecimal and enter 2af9:

enter image description here

In above steps, I’ve used 11001 which means IE11 Edge mode.

Use WebViewCompatible Control for Windows Forms

You can also use the new WebViewCompatible control for Windows Forms. You can see simple steps to use here: Replace WebBrowser control by new WebView Compatible control for Windows Forms.

WebViewCompatible uses one of two rendering engines to support a broader set of Windows clients:

  • On Windows 10 devices, the newer Microsoft Edge rendering engine is used to embed a view that renders richly formatted HTML content from a remote web server, dynamically generated code, or content files.

  • On devices running older versions of Windows, the System.Windows.Controls.WebBrowser is used, which provides Internet Explorer engine-based rendering.

  • Note: WebView2 is a replacement for WebVeiw and WebViewCompatible.

Set X-UA-Compatibile meta tag

In case that you have access to the html content of the page and you can change the content (for example it’s a local html file, or the site belong to yourself) then you can set X-UA-Compatibile meta tag in the head like: <meta http-equiv="X-UA-Compatible" content="IE=Edge" />.

Use other Browser Controls

You can rely on other browser controls like CefSharp.

Browse More Popular Posts

Leave a Comment