PDA

View Full Version : [OPEN] [UNKNOWN][3.0.x] Ext.isIE8=false when in compat mode + X-UA-Compatible is EmulateIE8



paulcrowder
15 Sep 2009, 9:38 AM
Ext version tested:


Ext 3.0.0
Ext 3.0.1
Ext 3.0.2



Adapter used:


ext
jquery



css used:


only default ext-all.css



Browser versions tested against:


IE8



Operating System:


WinXP Pro
Windows Vista Ultimate



Description:


All Ext adapters use the user agent to determine the browser version; however, this does not account for the document mode set by IE8. If the user has IE8 set to use compatibility mode for the site where the page is hosted, the user agent will always appear as IE7, even when the HTML document specifies the X-UA-Compatible META tag to tell the browser to emulate IE8. Since the browser can't know the X-UA-Compatible setting before issuing the request (since it's contained in the document that's being requested), IE8 always sets the user agent to IE7 when compatibility mode is enabled. Because Ext assumes IE7 in this case, certain widgets like combo boxes and editors in grids are misaligned because of the special rendering logic employed by Ext when the browser is IE7.
Note that this is especially problematic for intranet sites that use Ext, because IE8 ships with the "Display intranet sites in Compatibility View" setting on by default. The only way to force the browser to not use Compatibility View is to use the X-UA-Compatible META tag as described above.



Test Case:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE 8 Test</title>

<!-- ** CSS ** -->
<!-- base library -->
<link type="text/css" rel="stylesheet" href="extjs/ext-3.0.2/resources/css/ext-all.css" />

<!-- ** Javascript ** -->
<!-- base library -->
<script type="text/javascript" src="extjs/ext-3.0.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-3.0.2/ext-all.js"></script>

<!-- page specific -->
<script type="text/javascript">
Ext.onReady(function () {
document.getElementById("ie-version").innerHTML = Ext.isIE8;
var testCombo = new Ext.form.ComboBox({
applyTo: "test-combo"
});
});
</script>
</head>
<body>
<span id="ie-version"></span>
<br />
<input type="text" id="test-combo" />
</body>
</html>
Steps to reproduce the problem:


Set IE to render the sample page in compatibility mode by visiting Tools > Compatibility View Settings. You can either enable compatibility mode by placing this page on your local machine's web server root and checking "Display intranet sites in Compatibility View" (usually checked by default) or by checking "Display all websites in Compatibility View."
Visit the sample page.



The result that was expected:


The page should display "true" indicating the browser is IE8.
The drop-down image should be aligned properly with the INPUT element.



The result that occurs instead:


The page displays "false" indicating the browser is not IE8.
The drop-down image is misaligned.



Debugging already done:


Looked at the adapter code that determines the browser version and found that it only looks at the user agent.



Possible fix:


Use the document.documentMode property in IE8 to determine when IE is not in compatibility mode. The following code I've placed in between the ext-base.js adapter and ext-all.js on my page solves the issue:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE 8 Test</title>

<!-- ** CSS ** -->
<!-- base library -->
<link type="text/css" rel="stylesheet" href="extjs/ext-3.0.2/resources/css/ext-all.css" />

<!-- ** Javascript ** -->
<!-- base library -->
<script type="text/javascript" src="extjs/ext-3.0.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript">
(function () {
var i,
propName;

function setIsIEProp(version, value) {
var propName;

propName = "isIE" + version;
if (typeof Ext[propName] !== "undefined") {
Ext[propName] = value;
}
}

// The following code will check the document mode and override the logic that Ext uses to determine
// the browser version when the browser is IE.
if (Ext.isIE && typeof document.documentMode !== "undefined") {
// Set all the "isIEx" properties prior to the current document mode to false starting with 6
// (Ext only supports IE6 and above).
for (i = 6; i < document.documentMode; i++) {
setIsIEProp(i, false);
}
// Set the "isIEx" property that corresponds with the current document mode to true.
setIsIEProp(document.documentMode, true);
}

})();
</script>
<script type="text/javascript" src="extjs/ext-3.0.2/ext-all.js"></script>

<!-- page specific -->
<script type="text/javascript">
Ext.onReady(function () {
document.getElementById("ie-version").innerHTML = Ext.isIE8;
var testCombo = new Ext.form.ComboBox({
applyTo: "test-combo"
});
});
</script>
</head>
<body>
<span id="ie-version"></span>
<br />
<input type="text" id="test-combo" />
</body>
</html>

Condor
25 Sep 2009, 12:03 PM
Already mentioned here (http://www.extjs.com/forum/showthread.php?p=371089#post371089).

Arnaud Forcinal
9 May 2011, 1:43 AM
Many thanks paulcrowder, this particular issue bugged me for some times.

Condor, with Ext JS 3.3.3 the issue is still not fixed and Ext JS still relies on the user agent string to detect the current version of IE. The issue (and the fix implemented) you mention works when IE is in IE8 mode (with user agent reporting IE8) and the document is in IE7 mode (document.documentMode is 7) but their is still an issue when IE is in compatibility mode (all intranet sites by default and with user agent reporting IE7) and the document is in IE8 mode (document.documentMode is 8). Since the introduction of the documentMode property and the rendering engine configuration available in the page itself, parsing the user agent string to detect the version of IE isn't a reliable solution anymore. Something has to be done in Ext JS 3 (or 4 I haven't yet checked if this is an issue there also).

paulcrowder
9 May 2011, 10:36 AM
I still don't understand why this issue hasn't been resolved as of 3.3.3. The fix is extremely simple, yet 3.3.3 still includes the user agent in the version check for IE8 and IE9 which is completely unreliable in these versions of IE due to the compatibility mode user settings in these two browsers.