Controlling the IE Rendering Mode in a Browser Control

The "Browser" workspace control available when configuring agent workspaces is a powerful feature that enables some really interesting customization and integration options. For those unfamiliar with the "Browser" control, this component allows you to embed an HTML page into a workspace. Besides exposing an API for passing workspace field values at runtime via URL templating, there is also a JavaScript based API for communication between the host workspace and the client webpage. While this article won't dive into the various API's, you can learn more by visiting the Oracle documentation.

Oracle Documentation

The focus of this article is to provide notes on the behavior of the browser control's rendering behavior for HTML documents. If you don't take any action, or use a web-standard HTML template, you will see some unexpected results.

A little background; the underlying .NET control used by OSC is the WebBrowser WinForms control, which is a wrapper around a lower level ActiveX control. Effectively, a WebBrowser control is limited Internet Explorer window.

Besides some quirks involving session control and rending modes, it actually works pretty well for the most part (limited by the IE version of the agent's machine).

By default, if you display a 'standard' HTML5 page inside of a Browser control it will render as if you are using Internet Explorer 7! IE7 was released in October 2006, so as you can imagine it will be missing some key features necessary for using most modern JavaScript (jQuery, Angular) or CSS (Bootstrap) libraries.

TLDR; Tell me what to do

For the most part, you want to include the X-UA-Compatible meta tag with a value of 'IE=edge' in any page that will be hosted in a Browser control. This will render the page using the latest available document mode available on the agent's machine.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

HTML 5 Boilerplate test

I consider the following a standard HTML5 boilerplate template:

<!DOCTYPE html>
  <html lang="en">
      <head>
          <title></title>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link href="css/style.css" rel="stylesheet">
      </head>
      <body>
      <h1>IE Rendering with HTML5 Doctype, no X-UA-Compatible</h1>

      </body>
</html>
  

The HTML document will result in IE rendering the document with the following results:

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
Document Mode: 7
Compat Mode: CSS1Compat

I was surprised to find that the Document Mode was set to IE7 while if I opened the page in stand-alone IE it resolved as IE11.

Controlling the Rendering Mode

Fortunately, you can control the document rendering mode by specifying an HTML Meta tag named "X-UA-Compatible". This meta tag will inform Internet Explorer how to render the page content. The full documentation on this tag can be found on MSDN:

Experimentation Results

I took the time to test out a handful of the X-UA-Compatible values and observe how they resolved in a OSC Browser Control. Your results may vary based on the agent's workstation (OS version, IE version)

The environment used for these tests is:

  • Operating System: Windows Home Version 10.0.14393 Build 14393 64-bit mode via Parallels 12
  • IE Version: 11.321.14393.0
  • .NET Version: 4.6.1
X-UA-Compatible value Document Mode Compat Mode
IE=5 5 BackCompat
IE=6 5 BackCompat
IE=7 7 CSS1Compat
IE=8 8 CSS1Compat
IE=9 9 CSS1Compat
IE=10 10 CSS1Compat
IE=11 11 CSS1Compat
IE=12 11 CSS1Compat
IE=edge 11 CSS1Compat

Technically IE=5 and IE=6 are not officially supported values. The result, nonetheless, is interesting as you are magically transported back to the year March 1999; a time when the original Matrix movie was playing in theaters and "Livin' la Vida Loca" was spinning on your Compact Disc player while you drank a can of Surge.

Summary

If you are trying to build a page using modern libraries and techniques, I recommend using the "IE=edge" setting. According to the Microsoft documentation:

Note that this is functionally equivalent to using the HTML5 doctype. It places Internet Explorer into the highest supported document mode. Edge most is most useful for regularly maintained websites that are routinely tested for interoperability between multiple browsers, including Internet Explorer.

Note Starting with IE11, EdgeHTML mode is considered the preferred document mode. (In earlier versions, it was considered experimental.) To learn more, see Document modes are deprecated.

The latest page I build used jQuery 1.12.4, Bootstrap 3.3.7, AngularJS 1.5.8 on a OSC Version May 2016 (16.5) and it worked perfectly, but only after I specified the correct X-UA-Compatible setting.

Zircon - This is a contributing Drupal Theme
Design by WeebPal.