PDA

View Full Version : [INFOREQ-1032] IE8 browser detection problem on intranet



sareko
3 Jun 2010, 5:46 AM
Ext version tested:

Ext 3.2.1


Adapter used:

ext


css used:

only default ext-all.css




Browser versions tested against:

IE8


Operating System:

Windows 7


Description:

This was discussed already here: http://www.extjs.com/forum/showthread.php?76814-CLOSED-3.-toolbar-rendering-problem-with-IE8-in-IE7-emulation/page2 but the thread was closed before the issue was solved, and a quick glance in the code shows it didn't change.

Basically, because of Microsoft's "foresight" (or lack of), IE8 defaults to rendering in IE7 compat mode for intranet URLs. There is a metatag once can use to force IE8 in IE8 mode, however, since ExtJS uses the user agent string for browser detection, which is sent -before- the browser sees the metatag (and not adjusted afterward), ExtJS will set isIE8 at false and isIE7 at true even though the browser is rendering in IE8 mode.


Steps to reproduce the problem:

Put any ExtJS app on an intranet site
Make sure IE8 uses the default setting of "Display intranet sites in compatibility view" which can be found in the Tool -> Compatibility View setting. Thats the default IE8 installs with.
Have the <meta http-equiv="x-ua-compatible" content="IE=8"> metatag as the FIRST thing in your head section
Put a debugger statement in Ext.onReady :)
Notice that isIE7 is true, not isIE8
If you pull the IE8 dev tool, notice that it is in IE8 mode, but _IE8 compat view_ which is the problem


The result that was expected:

isIE8 should be true instead


The result that occurs instead:

isIE7 is true instead of isIE8


Possible fix:

As suggested in the thread linked above, there should be a test for document.documentMode when IE7 is detected. If you detect IE7 from the useragent but the documentMode is set to 8, then the later should take precedence and isIE8 should be set to true instead of isIE7


Without this, all of the IE7 specific logic in ExtJS kicks in even though IE8 renders in IE8 mode, which causes minor, but still problematic issues.

evant
3 Jun 2010, 6:25 AM
It's not a bug, we've chosen not to support "IE7 compat mode", it's neither IE8 nor IE7 and adds a whole extra set of problems.

You can easily place a header to force the browser into IE8 mode: http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx

sareko
3 Jun 2010, 6:31 AM
I don't know if you'll see this since its closed now, but you read my post wrong i beleive.

I am not asking to support IE7 mode. I'm saying that IE8 standard mode is not detected correctly. When you use the metatag (as i mentionned in the report above) to force IE8 in standard mode, the user agent string is wrong (because it is sent before the browser can see the metatag/header).

So while IE8 is in standard mode, since ExtJS relies exclusively on the user agent, it is detecting it wrong. IE8 mode will be enabled, but the user agent will say IE7, so you need to use document.documentMode to get the "real" mode.

In that case the -only- difference is the user agent string, so it doesn't introduce a whole set of extra problems. Again: I am not talking about IE7 compat mode, but IE8 in IE8 standard mode when using the metatag/header to force it. Right now in that situation ExtJS detects IE7, which is wrong.

The header to force IE8 in IE8 mode does no good if ExtJS bases browser detection on the user agent. (That is by the way documented by Microsoft too: they specifically say not to use the User Agent to detect IE8 because of this issue)

evant
3 Jun 2010, 5:23 PM
I misread sorry, let me look into it.

sareko
3 Jun 2010, 6:25 PM
Thanks a ton :)

And don't be sorry, english is not my first language, so I was probably not as clear as I could have been.

meroy
4 Jun 2010, 7:34 AM
Thanks for this thread.

This URL may be helpful.
http://blogs.msdn.com/b/ie/archive/2009/01/09/the-internet-explorer-8-user-agent-string-updated-edition.aspx

IE 8 will report the new "Trident" token in the the User-Agent string.

mozilla/4.0 (compatible; msie 7.0; windows nt 5.1; trident/4.0; .net clr 2.0.50727; ms-rtc lm 8)

Currently, I set the following in my header:



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


I also need to do the following to have extjs appear correctly. It's not much though and allows extjs to work in our intranet.



<!--[if gt IE 7]>
<style type="text/css">
.ext-ie7 .x-form-text, .ext-ie7 textarea.x-form-field {
margin: 0;
}
.ext-ie7 .x-small-editor .x-form-text {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
</style>
<![endif]-->




This thread has led me on another path. There's no need for the css fixes above. Instead, I just need to do the following:

The same meta in the header:



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


In Ext.js, I added the following: (from the URL above, only IE 8 reports the new trident token -- no impact to IE 7)



if (check(/msie 7.*trident/)) {
isIE7 = false;
isIE8 = true;
}

sareko
4 Jun 2010, 7:47 AM
I'm confused: What does the CSS you added do? If in IE8 or later, you set some IE7-only rules? Am i missing something or would these rules actually do nothing? (on our intranet ExtJS works flawlessly as long as isIE8 is set correctly. In my case I used the documentMode property, but it looks like searching for Trident works too, as you showed).

EDIT: Seems like i can't read either :) I understand now that this was your old fix. Nice catch on the Trident token.

meroy
4 Jun 2010, 8:11 AM
I too experienced IE8 compatibility woes with extjs after IE8 was installed on my laptop at work. Evan was helpful at the time as well.

I reported these at the time.

Text fields are not rendering properly
http://www.extjs.com/forum/showthread.php?95909-CLOSED-3.2.x-Text-fields-are-not-rendering-properly-with-IE-8&p=453555

Combo boxes are not rendering
http://www.extjs.com/forum/showthread.php?95898-CLOSED-3.2.x-Combo-boxes-are-not-rendering-properly-with-IE-8&p=453547

Tab Pane CSS issue for the Active Tab
http://www.extjs.com/forum/showthread.php?95908-CLOSED-3.2.x-Tab-Panel-CSS-issue-for-the-Active-Tab&p=453545

I ended up by adding the meta tag. Unfortunately, that wasn't enough and the reason for the small CSS fix. This thread led me to revisit this once again. The CSS fix is no longer required. This is working for me. All the examples are working.

The following code snippet is added to Ext.js immediately after isIE, isIE7, isIE8, isIE6, ... isSecure variable declarations.



// small fix for better IE8 experience while running inside the intranet
// ensure the following meta tag exist in your application header
// <meta http-equiv="X-UA-Compatible" content="IE=8" />
//
if (check(/msie 7.*trident/)) {
isIE7 = false;
isIE8 = true;
}



I'm having Apache insert the meta tag for me automatically when accessing the extjs examples locally while inside the intranet.



<Directory "/export/www/htdocs/shared/">
BrowserMatch MSIE best-standards-support
Header append X-UA-Compatible "IE=8"
</Directory>


This works too (some folks may want to use this instead).



<Directory "/export/www/htdocs/shared/">
BrowserMatch MSIE best-standards-support
Header append X-UA-Compatible "IE=edge env=best-standards-support"
</Directory>


Sareko, thanks for this thread.

sareko
4 Jun 2010, 2:46 PM
Any reason the thread is flagged as [CLOSED] again?

Btw meroy, in the interim, if you want the fix without having to modify the adapter file directly, you can simply put a script between ext-base and ext-all (or whatever) you use that looks something like:



if(Ext.isIE7 && document.documentMode == "8") {
Ext.apply(Ext, {
isIE7: false,
isIE8: true
});
}


I personally hate having to put code directly in the official extjs files, because then I can't upgrade as easily :)

meroy
4 Jun 2010, 5:56 PM
@sareko: Thank you for your suggestion.

evant
6 Jun 2010, 8:15 PM
I wasn't able to reproduce this.

I had "Show intranet sites in compat mode" checked. Then I navigate to some local site in intranet mode and it correctly indentifies itself as IE8.

Is there something I'm missing here?

evant
6 Jun 2010, 8:16 PM
Also, the guys at IE have said that the header in the file should trump any settings, though a couple of people on that thread seem to disagree:

http://social.msdn.microsoft.com/Forums/en/iewebdevelopment/thread/afb57ce6-d149-4a09-8811-63c0645c92e6

sareko
7 Jun 2010, 5:20 AM
Make sure that you didn't change anything using the developer bar, and that are going to a site that IE will actually think is an intranet site (so a remote machine, I think with a port number. Localhost will not work).

The header tag will trump anything as far as rendering engine goes. The -only- thing that will not be correct is the user agent string: remember, that is sent during the -request-. The header tag is received from the -response-. It is impossible for IE to send the correct user agent in those circumstance. (except for the new "Trident" user agent token, as the other poster said, since its always sent).

In the dev toolbar, this situation is reflected by document mode: IE8 Standards, but Browser Mode: IE8 Compatibility View (which just means the user agent is different, everything else is the same)

Looking at sites on our intranet, it seems like sites on PORT 80 will work correctly. Non-default ports trigger it. document.documentMode = "8", and the user agent has "trident" in it, but reports IE7.

sareko
7 Jun 2010, 5:31 AM
http://blogs.msdn.com/b/mikeormond/archive/2008/09/25/ie-8-compatibility-meta-tags-http-headers-user-agent-strings-etc-etc.aspx

This site explains all the possibilities. Obviously ExtJS cannot (and should not!) support them all. Just the default :)

The situation is the 4th column, second row in the chart. Compatibility Mode (any intranet website that is NOT localhost, and NOT port 80, as far as I can tell), with <meta http-equiv="x-ua-compatible" content="IE=8" />.

In that case, documentMode = 8, the rendering engine is IE8 Standard, the user agent is IE7 but includes the Trident token, and ExtJS works perfectly if it is patched so isIE8 is set to true.

VT-TizianoF
10 Jun 2010, 7:30 AM
I have the same problem too! Any chance for the solution to be added to extjs code?

Jamie Avins
10 Jun 2010, 8:45 AM
We'll test it to see if we can implement it for 3.3.0.

Torben Riis
26 Jun 2010, 2:31 AM
I agree, please make a fix for this.
We have used hours on this issue, and we actually had chosen ExtJS, in the hope that this kind of time wasting issues should be over..

evant
28 Jun 2010, 1:48 AM
Can someone please post a test case for this? I'm still unable to reproduce it. Exactly what settings are you using on the page (doctype? meta header?)

Animal
28 Jun 2010, 2:26 AM
There is a problem using Standards Mode in IE8 which I don't think Ext can do anything about.

We use Standards Mode here at work:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


and we send this HTTP header back when the User-Agent ids itself as IE8:



X-UA-Compatible: IE=8


But IE8 has a horrible default setting:

The Tools->"Compatibility View Settings" window has "Display intranet sites in Compatibility view" checked

So it's using quirks mode, regardless of what you tell it! I think it's an IE8 bug.

Condor
28 Jun 2010, 2:50 AM
Compatibility mode isn't quirks; it's IE7 mode.

I still think Ext should check the documentMode to see if IE8 is using compatibility mode.

Torben Riis
28 Jun 2010, 4:33 AM
The only way I could get my application rendered correctly in IE 8 running on a non top level domain (such as "MYHOST"), were by setting:


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

and include the previous mentioned fix by "sareko", between ext-base and ext-all.


if(Ext.isIE7 && document.documentMode == "8") {
Ext.apply(Ext, {
isIE7: false,
isIE8: true
});
}

It should still be mentioned for testing, that localhost is treaded differently.

Animal
28 Jun 2010, 4:59 AM
Compatibility mode isn't quirks; it's IE7 mode.

I still think Ext should check the documentMode to see if IE8 is using compatibility mode.

Euy! How many "Modes" can then invent to try to cover up their buggy implementations?

Well, that was an issue for us. IE7 mode causes a lot of bad problems like form items staying put when the form scrolls.

sareko
28 Jun 2010, 5:10 AM
Torben Riis is correct as to how to reproduce it and how to fix it (though I wouldn't use "edge" in the meta...because the meaning of that would probably screw IE9 later on). Intranet site that has an intranet-style url (not top level, port number, yadah yadah. Anything IE usually use Intranet mode for I think. And not localhost). Don't fiddle with the developer bar except to see in what mode IE goes.

Condor
28 Jun 2010, 5:11 AM
@Animal: So why not include a X-UA-Compatible metatag in the header to force IE8 mode?

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

sareko
28 Jun 2010, 7:06 AM
There is a problem using Standards Mode in IE8 which I don't think Ext can do anything about.

We use Standards Mode here at work:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


and we send this HTTP header back when the User-Agent ids itself as IE8:



X-UA-Compatible: IE=8


But IE8 has a horrible default setting:

The Tools->"Compatibility View Settings" window has "Display intranet sites in Compatibility view" checked

So it's using quirks mode, regardless of what you tell it! I think it's an IE8 bug.

This is exactly what we're talking about. And its not an IE8 bug. If you send the HTTP header, it WILL use IE8 mode. Try it with a normal webpage and use some IE8-specific stuff. It will work just fine. ExtJS is just detecting the browser based on user agent, which is incorrect for IE8.

This behavior is fully documented by Microsoft too. Add the code to make ExtJS check documentMode, and tadah, all works fine even if Display intranet sites in Compatibility view is checked, as long as you send the meta tag.

Metatag is for the rendering engine, not the user agent. ExtJS only relies on user agent. Thats all there is to it guys :)

If there is one "bug" on the IE team side here, its their complete lack of knowledge as to how to explain things to people. They documented the behavior correctly, then went all over the place saying "The metatag is all you need to force IE8 standard mode!", leaving out the details.

There IS a way to use the user agent anyway with the trident tag, but im not sure thats reliable.

Animal
28 Jun 2010, 7:09 AM
@Condor: We pass the HTTP header instead. I feel it's more reliable to set modes in a header rather than after the browser has begun to parse the document:



X-UA-Compatible: IE=8


I think your tag is wrong according to http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx#Content

If you use a meta tag, it should be



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

evant
15 Jul 2010, 4:49 AM
So, to clarify, if we apply the changes, we'll end up with:

Browser Mode (from the dev toolbar)
IE8
-------------
strict: IE8
quirks: IE8
ie7 standards: IE7

IE8 Compat
------------
strict: IE7
quirks: IE7
ie7 standards: IE7

IE7
----------
strict: IE7
quirks: IE7

The change being:



isIE7 = isIE && (check(/msie 7/) || document.documentMode == 7),
isIE8 = isIE && (check(/msie 8/) && document.documentMode != 7),

sareko
15 Jul 2010, 4:55 AM
I believe thats correct. Then we won't have to deal with Microsoft's stupid default settings anymore!

Condor
15 Jul 2010, 5:49 AM
Correct, apart from one small detail:

On an IE8 with documentMode = 7 the rendering is indeed done according to IE7 rules, but the javascript engine is still IE8.

So any IE8 specific optimizations (not rendering related) could still work, but would be ignored, because Ext is running in isIE7 mode.

sareko
15 Jul 2010, 7:11 AM
I dont think ExtJS team should care about that IMO. As they said earlier in the thread, IE8 in IE7 mode is not officially supported (there's actually some glitches anyhow, even if browser detection is correct).

This change should really just be to allow IE8 in IE8 mode to be detected correctly.

meroy
17 Jul 2010, 9:29 AM
Thanks for getting this fix into the framework.

makana
10 Dec 2010, 4:40 AM
The problem isn't really fixed for me in ExtJS3.3.1.

I use IE8 on WinXP, so I get the following userAgent string:


Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; ...

but documentMode == 8, since I use the meta-tag


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


But in Ext.js there's the following line:


isIE8 = isIE && (check(/msie 8/) && docMode != 7),

so it fails, since there's "MSIE 7" in the userAgent string.

IE8 Developer Tools show correct, using IE8 Standard mode.

But the problem is, that the <body>-Tag contains the class ext-ie7. If I replace it with ext-ie8, all is correct.
So all that helps is the hack from this post (http://www.sencha.com/forum/showthread.php?114853-IE8-Rendering-Problem-Intranet-compatibility-view-not-standards-compliant.-Help!&p=535599#post535599)




// hack for IE8 when compatibility view is used
if(Ext.isIE7 && document.documentMode == 8) {
Ext.isIE7 = false;
Ext.isIE8 = true;
Ext.getBody().replaceClass('ext-ie7', 'ext-ie8');
}



I think, in Ext.js it should be


isIE8 = isIE && (check(/msie 8/) || check(/trident/)) && docMode == 8,
isIE7 = isIE && !isIE8 && (check(/msie 7/) || docMode == 7),


Please consider the following link as well.
http://blogs.msdn.com/b/ie/archive/2009/01/09/the-internet-explorer-8-user-agent-string-updated-edition.aspx

seamas
14 Aug 2012, 1:04 AM
Hi,

I am using ExtJs4.0 and IE8.


Step1: I have added following meta tag in my jsp file.

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

Then my IE8 dev tool show:
Browser Mode: IE8 Compat view .
Document Mode: IE8 Standards.

Step2: I added following code you guys mentioned. in ext.js Ext.application = function(a) {}

isIE8 = isIE && (check(/msie 8/) || check(/trident/)) && docMode == 8,
isIE7 = isIE && !isIE8 && (check(/msie 7/) || docMode == 7),

But IE8 Browser Mode still IE8 Compat view.

Could you please tell me where i should add the code, it could working

seamas
14 Aug 2012, 1:28 AM
Hi Evant

I am using ExtJs4.0, I found the folloing code in ext-debug.js file.

isIE7 = isIE && (check/msie 7/) || docMode == 7),isIE8 = isIE && (check(/msie 8/) && docMode != 7 && docMode != 9 || docMode == 8),

I think the above code is the same as yours code.

But my IE8 Browser Mode still 'IE8 Compat Viw'

Could you please give me point out?