Merge pull request #3671 from w8r/gridlayer-opacity-fix

Gridlayer opacity flicker fix
Leaflet · Jul 24, 2015 · 0b88983 · 0b88983
2 parents ccfd306 + 5e32cd1
commit 0b88983
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 5 deletions.
diff --git a/debug/map/tile-opacity.html b/debug/map/tile-opacity.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script type="text/javascript" src="../../build/deps.js"></script>
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
+
+	<script type="text/javascript">
+		var map = new L.Map('map');
+		var nexrad = new L.TileLayer.WMS("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
+			layers: 'nexrad-n0r-900913',
+			format: 'image/png',
+			transparent: true,
+			attribution: "Weather data &copy; 2011 IEM Nexrad",
+			opacity: 0.4
+		});
+
+		var bounds = new L.LatLngBounds(new L.LatLng(32, -126), new L.LatLng(50, -64));
+
+		map.addLayer(nexrad).fitBounds(bounds);
+	</script>
+</body>
+</html>
diff --git a/src/layer/tile/GridLayer.js b/src/layer/tile/GridLayer.js
@@ -156,14 +156,14 @@ L.GridLayer = L.Layer.extend({
 
 	_updateOpacity: function () {
 		if (!this._map) { return; }
-		var opacity = this.options.opacity;
 
 		// IE doesn't inherit filter opacity properly, so we're forced to set it on tiles
-		if (!L.Browser.ielt9 && !this._map._fadeAnimated) {
-			L.DomUtil.setOpacity(this._container, opacity);
+		if (L.Browser.ielt9 || !this._map._fadeAnimated) {
 			return;
 		}
 
+		L.DomUtil.setOpacity(this._container, this.options.opacity);
+
 		var now = +new Date(),
 			nextFrame = false,
 			willPrune = false;
@@ -173,11 +173,11 @@ L.GridLayer = L.Layer.extend({
 			if (!tile.current || !tile.loaded) { continue; }
 
 			var fade = Math.min(1, (now - tile.loaded) / 200);
+
+			L.DomUtil.setOpacity(tile.el, fade);
 			if (fade < 1) {
-				L.DomUtil.setOpacity(tile.el, opacity * fade);
 				nextFrame = true;
 			} else {
-				L.DomUtil.setOpacity(tile.el, opacity);
 				if (tile.active) { willPrune = true; }
 				tile.active = true;
 			}