IE8 specific fix for opacity. r=erilem (closes #3431)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@12228 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

lib/OpenLayers/Layer.js

@@ -347,8 +347,11 @@ OpenLayers.Layer = OpenLayers.Class({
             this.id = OpenLayers.Util.createUniqueID(this.CLASS_NAME + "_");
 
             this.div = OpenLayers.Util.createDiv(this.id);
-            this.div.style.width = "100%";
+            var style = this.div.style;
-            this.div.style.height = "100%";
+            style.width = "100%";
+            style.height = "100%";
+            style.overflow = "";
+            this.div.className = "olLayerDiv";
             this.div.dir = "ltr";
             if (this.opacity != null && this.opacity < 1) {
                 OpenLayers.Util.modifyDOMElement(
@@ -367,6 +370,19 @@ OpenLayers.Layer = OpenLayers.Class({
         if (this.wrapDateLine) {
             this.displayOutsideMaxExtent = true;
         }
+        
+        //TODO remove the if block below when we drop support for IE8.
+        if (parseInt(navigator.appVersion.split("MSIE")[1], 10) == 8) {
+            // Workaround for opacity handling in IE8 - also see
+            // .ie8-opacity-hack selectors in theme/default/style.css
+            this.events.register("loadend", this, function() {
+                var opacity = this.opacity;
+                if (opacity != null && opacity >= 0 && opacity < 1) {
+                    OpenLayers.Element.addClass(this.div, "ie8-opacity-hack");
+                    this.div.style.filter = "alpha(opacity=" + (opacity * 100) + ")";
+                }
+            });
+        }
     },
     
     /**

lib/OpenLayers/Map.js

@@ -971,8 +971,6 @@ OpenLayers.Map = OpenLayers.Class({
         }
 
         
-        layer.div.className = "olLayerDiv";
-        layer.div.style.overflow = "";
         this.setLayerZIndex(layer, this.layers.length);
 
         if (layer.isFixed) {

theme/default/style.css

@@ -14,6 +14,15 @@ div.olLayerDiv {
    -khtml-user-select: none;
 }
 
+/* TODO remove the two style definitions below when we drop support for IE8 */
+div.olLayerDiv.ie8-opacity-hack {
+    width: 9999px !important;
+    height: 9999px !important;
+}
+div.olLayerDiv.ie8-opacity-hack div, .ie8-opacity-hack img.olTileImage {
+    filter: inherit;
+}
+
 .olLayerGoogleCopyright {
     left: 2px;
     bottom: 2px;