IE8 jumbled map without compatibility view

MatthewLawton · ‎10-13-2010

I was very surprised not to find a post about this issue. For the past several months many of my users have been dealing with a problem that arises when accessing our JavaScript API applications using Internet Explorer 8. The tiled map services will appear jumbled in the map, like a jigsaw puzzle. The remedy is to activate the "Compatibility View" icon in IE8. As that icon is not activated by default, it causes our users great frustration. I am sure many assume the application is not functional and never return.

What is the source of this problem? Is there possibly something that is not configured correctly in ArcGIS Server? Am I the only one to experience this?

ScottDavis · ‎10-13-2010

You can force IE8 to use compatibility mode with the following meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <!-- use compatibility mode in IE 8-->

MatthewLawton · ‎10-19-2010

Thanks, Scott. I will give this a try.

Do you know if this is an inherent problem with cached map services and IE8?

ScottDavis · ‎10-19-2010

Thanks, Scott. I will give this a try.

Do you know if this is an inherent problem with cached map services and IE8?

I don't know. I've had very inconsistent results per machine when trying to debug IE.

JeffPace · ‎10-25-2010

I found using the below gave me best compatibility for IE
keys (for me at least) were using Strict and content="IE=7"

hope that helps. I am using the sample viewer btw.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="org.apache.commons.lang.*"%>

<html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <meta http-equiv="X-UA-Compatible" content="IE=7" />

JonUhal · ‎02-10-2011

I've also noticed this problem and found that when (using JSAPI 1.4) esri.js injects the stylesheets into the <head>, it tries to inject two links to stylesheets as well as all of the JavaScript references. These stylesheet references show up in IE8 debugger as:

<link href="[object]" rel="stylesheet" type="text/css" media="all"/>
<link href="[object]" rel="stylesheet" type="text/css" media="all"/>

When I look at the same page in FF3.6, the same lines in the <head> look like:

<link rel="stylesheet" type="text/css" media="all" href="http://esri:8399/arcgis_js_api/library/1.4/arcgis/css/jsapi.css"/>
<link rel="stylesheet" type="text/css" media="all" href="http://esri:8399/arcgis_js_api/library/1.4/arcgis/js/esri/dijit/css/InfoWindow.css"/>

So for some reason, the library can figure out how to determine the URL when processed through FF but not IE8 (without compatibility mode). I don't know enough about why dojo is determining the URL correctly in one browser but not the other to fix this myself.

JonUhal · ‎02-10-2011

A workaround for this could be done as follows to make this work for IE8 and FF3.6 (as far as my testing goes). Within the ESRI JavaScript library (this is for JSAPI 1.4... not sure about other versions), locate the esri.js file and replace the section:

dojo.create("link",_5,h);

with the following:

var link=document.createElement("link");link.type=_5.type;link.rel=_5.rel;link.media=_5.media;link.href=_5.href;h.appendChild(link);

For some reason, the dojo.create method is not working as expected with IE8. This just reverts to plain old JavaScript to create the proper stylesheet links.

Other suggestions are very appreciated.