Graceful degradation of zoom-pan animations, fixes #3272.

debug/map/zoompan.html

@@ -13,6 +13,10 @@
 		width: 600px;
 		height: 400px;
 	}
+	button {
+		min-width: 3em;
+		text-align: center;
+	}
 	</style>
 
 	<script type="text/javascript" src="../../build/deps.js"></script>
@@ -22,21 +26,22 @@
 
 	<div id="map"></div>
 
-	<div style="position: absolute; left: 530px; top: 10px; z-index: 500">
+	<div style="position: absolute; left: 620px; top: 10px; z-index: 500">
-		<!-- <button id="london">London</button>
+		<div><button id="dc">DC</button></div>
-		<button id="kyiv">Kyiv</button> -->
+		<div><button id="sf">SF</button></div>
-		<button id="dc">DC</button>
+		<div><button id="trd">TRD</button>(flyTo 20 sec)</div>
-		<button id="sf">SF</button>
+		<div><button id="lnd">LND</button>(fract. zoom)</div>
-		<button id="trd">TRD</button>
+		<div><button id="kyiv">KIEV</button>(setView, fract. zoom)</div>
-		<button id="stop">stop</button>
+		<div><button id="stop">stop</button></div>
+		<div id='pos'></div>
 	</div>
 
 	<script type="text/javascript">
 
 		var kyiv = [50.5, 30.5],
-			london = [51.51, -0.12],
+			lnd = [51.51, -0.12],
 			sf = [37.77, -122.42],
-			dc = [38.91, -77.04];
+			dc = [38.91, -77.04],
 			trd = [63.41, 10.41];
 
 		var map = L.map('map').setView(dc, 10);
@@ -47,19 +52,24 @@
 		}).addTo(map);
 
 		var marker1 = L.marker(kyiv).addTo(map),
-			marker2 = L.marker(london).addTo(map);
+			marker2 = L.marker(lnd).addTo(map);
 			// marker3 = L.marker(dc).addTo(map),
 			// marker4 = L.marker(sf).addTo(map);
 
 		document.getElementById('dc').onclick = function () { map.flyTo(dc, 10); };
 		document.getElementById('sf').onclick = function () { map.flyTo(sf, 10); };
 		document.getElementById('trd').onclick = function () { map.flyTo(trd, 10, {duration: 20}); };
+		document.getElementById('lnd').onclick = function () { map.flyTo(lnd, 9.25); };
+		document.getElementById('kyiv').onclick = function () { map.setView(kyiv, 9.25); };
 		document.getElementById('stop').onclick = function () { map.stop(); };
-		// document.getElementById('london').onclick = function () { map.flyTo(london); };
-		// document.getElementById('kyiv').onclick = function () { map.flyTo(kyiv); };
 
 		function logEvent(e) { console.log(e.type); }
 
+		map.on('move', function(){
+
+			document.getElementById('pos').innerHTML = map.getCenter() + ' z' + map.getZoom();
+		});
+
 		// map.on('click', logEvent);
 
 		// map.on('movestart', logEvent);

src/layer/tile/GridLayer.js

@@ -349,7 +349,11 @@ L.GridLayer = L.Layer.extend({
 		    translate = level.origin.multiplyBy(scale)
 		        .subtract(this._map._getNewPixelOrigin(center, zoom)).round();
 
+		if (L.Browser.any3d) {
 			L.DomUtil.setTransform(level.el, translate, scale);
+		} else {
+			L.DomUtil.setPosition(level.el, translate);
+		}
 	},
 
 	_resetGrid: function () {

src/map/Map.js

@@ -766,6 +766,7 @@ L.Map = L.Evented.extend({
 	_limitZoom: function (zoom) {
 		var min = this.getMinZoom(),
 		    max = this.getMaxZoom();
+		if (!L.Browser.any3d) { zoom = Math.round(zoom); }
 
 		return Math.max(min, Math.min(max, zoom));
 	}

src/map/anim/Map.FlyTo.js

@@ -3,7 +3,7 @@ L.Map.include({
 	flyTo: function (targetCenter, targetZoom, options) {
 
 		options = options || {};
-		if (options.animate === false) {
+		if (options.animate === false || !L.Browser.any3d) {
 			return this.setView(targetCenter, targetZoom, options);
 		}