What specific things cause IE8 to trigger compatibility mode?

Question

I've got an app that under some circumstances causes IE8 to popup the compatibility message and reload in compat mode:

a problem displaying caused internet explorer to refresh the webpage using compatibility view

This is rare, and does not occur due to the meta-tags, as far as I can tell. It happens as a response to user action that alters the DOM. This is the same problem as: https://superuser.com/questions/215281/how-do-i-stop-i-e-jumping-into-compatability-view, but my question is: What types of things cause this, as an aid in fixing it.

Put another way, see this site thesitewizard.com, where a third cause of compatibility mode in IE8 is described as:

and, on occasion, for some other unfathomable, undocumented reason, on pages that are validated as standards-compliant (or, at least, it does this in Release Candidate 1).

And the question is: What unfathomable, undocumented reasons?

Beckner

I've never seen an HTML Validated page "jump" into compatibility view. But how on earth can anyone help you without seeing your app? Otherwise the answers here will just be a random string of guesses. – Arly

Please see question title. I'm looking for what types of things cause this, in order to help guide debugging. As for not ever seeing it, click the superuser link in the question, there is a screenshot of it. – Beckner

I read the title and understand what your looking for. However, asking a question that cannot lead to a specific correct answer or solution will likely get closed. – Arly

Please read: tinyurl.com/so-hints – Arly

If someone has an answer to this question, they can post it: "I had this problem, and found that X caused it." Or, "It's known that doing X when Y can lead to this." – Beckner

Holy crap! IE does that? Reason #9762 no one should use IE. – Dill

Yeah, I had to log into their IE8 setup (IE9 emulation doesn't repro) and see it. It was traumatic. – Beckner

Answer 1

After a long debugging session (using old school alerts to pinpoint what was failing where), this seemingly innocous line of dom manipulation was the culprit:

document.getElementById("literal"+varValue).style.display = "none";

There was no error here, and the element was apparently found (ie, this is not a garden variety null pointer).

This is a large scale app, and there is a lot going on around this code. I switched it to the following, and this apparently has prevented the issue:

setTimeout(function(){
           var layoutEl = document.getElementById("literal"+varValue);
           if (layoutEl)
               layoutEl.style.display = "none";
       },10)

Beckner

For me too, attempting to hide a specific element caused IE8 to refresh the page using Compatibility View. I'm using jQuery though so using .hide() and making use of the duration option did the trick, e.g. $('#id').hide(1). – Noblewoman

Answer 2

The following content comes from an MSDN article "Controlling default rendering".

---

Be aware that certain conditions, like those listed here, can force Internet Explorer to display pages in a document compatibility mode different from the one specified in the webpage.

• Compatibility View is enabled for the page.
• The page is loaded in the Intranet zone and Internet Explorer is configured to use Compatibility View for pages loaded from the Internet zone.
• The page is loaded from the user's local file system (which means the page is loaded in the Intranet zone) and Internet Explorer is configured to use Compatibility View for pages loaded from the Internet zone.
• Internet Explorer is configured to display all websites in Compatibility View.
• Internet Explorer is configured to use the Compatibility View List, which specifies a set of websites that are always displayed in Compatibility View.
• The Developer Tools are used to override the settings specified in the webpage.
• The webpage encountered a page layout error and Internet Explorer is configured to automatically recover from such errors by reopening the page in Compatibility View.
• The page contains a Mark of the Web that directs it to be loaded in a particular zone.

These links provide additional info that describes how Internet Explorer determines the appropriate document mode for a webpage:

• Internet Explorer Blog: Compatiblity Features for Site Developers
• Internet Explorer Blog: Compatibility View Recap
• Internet Explorer Standards Support Overview, Section 2.1.2: Document Modes

Patras

Answer 3

I know you allready have your answer, but today I've been searching too what was causing IE8 to trigger compatibility mode. I searched for JavaScript code, css (:first, :last, etc) but it appeared to be some inline style:

max-height in combination with overflow..

So this (also) triggers compatibility mode in IE8:

style="overflow:scroll;max-height:200px;"

And this not, so it solved my problem:

style="overflow:scroll;height:200px;"

Edit: I think this is related: IE8 overflow:auto with max-height

Cassity

Thanks - don't forget to upvote the question if you think its a good one – Beckner

I removed the elements with overflow on a page being forced to load in compatibility view, and the page loaded normally. Problem found. – Pongid

Answer 4

I know this is an old question, but I figured I would add something that I just came across. I was having an issue where compatibility mode was being forced and I couldn't track down the source. I manually took the page out of compatibility mode and noticed that some characters were not showing up. It ended up being a bulleted list that was using a custom character on a pseudo element:

li:before {
  content: '\25B6';
}

As a quick fix, I ended up just overwriting this for IE less than 9:

.lt-ie9 li:before {
  content: '';
}

This article gave me the idea to look for mishandled characters. Hope this helps somebody if they stumble upon a similar issue!

Abreact