Server Side Rendering using vitual output directory not working for IE9

RaphaelDürst · ‎07-31-2013

Server Side Rendering using vitual output directory works just fine for all browser except the Internet Explorer 9. For some reason the IE9 does try to get the picture from the virtual output directory.

The following html gives us headache using the IE9. Upgrading to IE10 would do the job, although we cannot ask the customers to do so.

Any light into this problem is greatly appreciated!!!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=8, IE=9, IE=10">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>IE Issue</title>
<link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dojox/form/resources/RangeSlider.css">
<link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">

<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
h3 { margin: 0 0 5px 0; border-bottom: 1px solid #444; text-align: center }
.shadow {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
#map{ margin: 0; padding: 0; }
#feedback {
background: #fff;
color: #444;
position: absolute;
font-family: arial;
height: 210px;
left: 30px;
margin: 5px;
padding: 10px;
bottom: 30px;
width: 320px;
z-index: 40;
}
.note { font-size: 80%; padding: 0 0 10px 0; }
#slider {
color: #666;
margin: 5px auto;
padding: 3px;
}
#appSliderLabel { padding: 0 0 10px 0; }
#maxLabel { display: inline-block; margin: 0 0 0 -30px;}
#minLabel { display: inline-block; margin: 0 0 0 30px;}
#breakInfo { padding: 20px 0 0 0; }
</style>

<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>

<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.HorizontalRuleLabels");
dojo.require("dojox.form.RangeSlider");
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.renderer");
dojo.require("esri.dijit.Legend");

// one global for persistent app variables
var app = {};

var map;
var highlightSymbol;
var highlightGraphic;
var mapClickEventHandle;
var mode = 2;
var companynetwork = 1;

function init() {
var lods = [
{
"level": 3,
"resolution": 19567.87924099992,
"scale": 7.3957190948944E7
},
{
"level": 4,
"resolution": 9783.93962049996,
"scale": 3.6978595474472E7
},
{
"level": 5,
"resolution": 4891.96981024998,
"scale": 1.8489297737236E7
},
{
"level": 6,
"resolution": 2445.98490512499,
"scale": 9244648.868618
},
{
"level": 7,
"resolution": 1222.992452562495,
"scale": 4622324.434309
},
{
"level": 8,
"resolution": 611.4962262813797,
"scale": 2311162.217155
}
];

map = new esri.Map("map", {
extent: new esri.geometry.Extent({ "xmin": -2810436, "ymin": 3960049, "xmax": 17853544, "ymax": 20832657, "spatialReference": { "wkid": 102100} }),
center: [7.07, 51.2],
zoom: 0,
lods: lods
});

map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("https://www.comfone.com/arcgis/rest/services/basemap_basic/MapServer"));

var defaultSymbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_NULL);
defaultSymbol.outline.setStyle(esri.symbol.SimpleLineSymbol.STYLE_NULL);

var renderer = new esri.renderer.UniqueValueRenderer(defaultSymbol, "iso_a3", "");
renderer.addValue('USA', new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color('#DC001B')));
renderer.addValue('CAN', new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color('#DC001B')));
renderer.addValue('DEU', new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color('#DC001B')));
renderer.addValue('ITA', new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color('#DC001B')));
renderer.addValue('CHE', new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color('#DC001B')));

var worldCountriesLayer = new esri.layers.ArcGISDynamicMapServiceLayer("https://www.comfone.com/arcgis/rest/services/country_outline/MapServer", {
outFields: ["iso_a3"]
});

var optionsArray = [];
var drawingOptions = new esri.layers.LayerDrawingOptions();
drawingOptions.renderer = renderer;
optionsArray[0] = drawingOptions;
worldCountriesLayer.setLayerDrawingOptions(optionsArray);
map.addLayer(worldCountriesLayer);

var labelingLayer = new esri.layers.ArcGISDynamicMapServiceLayer("https://www.comfone.com/arcgis/rest/services/label/MapServer", {"opacity":1.0});
labelingLayer.id = "labelingLayer";
map.addLayer(labelingLayer);
}

dojo.ready(init);
</script>

</head>

<div id="map" class="claro" style="width: auto; height: 900px; border: 1px solid #000;
margin-left: 5px; margin-right: 5px; position: relative;">

</div>
</body>