fix vector drifts when zoomAnimation is false and zooming via `fl…

…yTo` or pinch (#8794) Co-authored-by: Florian Bischof <design.falke@gmail.com>
Leaflet · Apr 10, 2023 · af165dd · af165dd
1 parent 8887c41
commit af165dd
Show file tree

Hide file tree

Showing 3 changed files with 176 additions and 3 deletions.
diff --git a/debug/vector/vector-drift.html b/debug/vector/vector-drift.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+	<link rel="stylesheet" href="../css/screen.css" />
+	<script src="../../dist/leaflet-src.js"></script>
+</head>
+<body>
+	<button id="btn-1">A</button>
+	<button id="btn-2">B</button>
+	<div id="map"></div>
+
+	<script>
+		var map = L.map('map', {
+			zoomAnimation: false,
+			// preferCanvas: true
+		}).setView([0, 0], 7);
+
+		var markerA = L.marker([1, 0]).addTo(map);
+		var markerB = L.marker([1, 2]).addTo(map);
+		L.polygon([
+			[0, 0],
+			[2, 0],
+			[2, 2],
+			[0, 2],
+			[0, 0],
+		])
+		.bindPopup('Hello world')
+		.addTo(map);
+
+		// or pinch zoom in mobile
+		document.getElementById('btn-1').addEventListener('click', function () {
+			map.flyTo(markerA.getLatLng(), 6);
+		});
+		document.getElementById('btn-2').addEventListener('click', function () {
+			map.flyTo(markerB.getLatLng(), 7);
+		});
+	</script>
+</body>
+</html>
diff --git a/spec/suites/map/handler/Map.TouchZoomSpec.js b/spec/suites/map/handler/Map.TouchZoomSpec.js
@@ -157,4 +157,137 @@ describe("Map.TouchZoom", function () {
 			.down().moveBy(-200, 0, 500).up(100);
 	});
 
+	it.skipIfNotTouch("Layer is rendered correctly while pinch zoom when zoomAnim is true", function (done) {
+		if (L.Browser.ie) {
+			// getBoundingClientRect doesn't return valid values in IE
+			done();
+			return;
+		}
+		map.remove();
+
+		map = new L.Map(container, {
+			touchZoom: true,
+			inertia: false,
+			zoomAnimation: true
+		});
+
+		map.setView([0, 0], 8);
+
+		var polygon = L.polygon([
+			[0, 0],
+			[0, 1],
+			[1, 1],
+			[1, 0]
+		]).addTo(map);
+
+		var alreadyCalled = false;
+		var hand = new Hand({
+			timing: 'fastframe',
+			onStop: function () {
+				setTimeout(function () {
+					if (alreadyCalled) {
+						return; // Will recursivly call itself otherwise
+					}
+					alreadyCalled = true;
+
+					var renderedRect = polygon._path.getBoundingClientRect();
+
+					var width = renderedRect.width;
+					var height = renderedRect.height;
+
+					expect(height < 50).to.be(true);
+					expect(width < 50).to.be(true);
+					expect(height + width > 0).to.be(true);
+
+					var x = renderedRect.x;
+					var y = renderedRect.y;
+
+					expect(x).to.be.within(299, 301);
+					expect(y).to.be.within(270, 280);
+
+					// Fingers lifted after expects as bug goes away when lifted
+					hand._fingers[0].up();
+					hand._fingers[1].up();
+
+					done();
+				}, 100);
+			}
+		});
+
+		var f1 = hand.growFinger(touchEventType);
+		var f2 = hand.growFinger(touchEventType);
+
+		hand.sync(5);
+		f1.wait(100).moveTo(75, 300, 0)
+			.down().moveBy(200, 0, 500);
+		f2.wait(100).moveTo(525, 300, 0)
+			.down().moveBy(-200, 0, 500);
+	});
+
+	it.skipIfNotTouch("Layer is rendered correctly while pinch zoom when zoomAnim is false", function (done) {
+		if (L.Browser.ie) {
+			// getBoundingClientRect doesn't return valid values in IE
+			done();
+			return;
+		}
+		map.remove();
+
+		map = new L.Map(container, {
+			touchZoom: true,
+			inertia: false,
+			zoomAnimation: false
+		});
+
+		map.setView([0, 0], 8);
+
+		var polygon = L.polygon([
+			[0, 0],
+			[0, 1],
+			[1, 1],
+			[1, 0]
+		]).addTo(map);
+
+		var alreadyCalled = false;
+		var hand = new Hand({
+			timing: 'fastframe',
+			onStop: function () {
+				setTimeout(function () {
+					if (alreadyCalled) {
+						return; // Will recursivly call itself otherwise
+					}
+					alreadyCalled = true;
+
+					var renderedRect = polygon._path.getBoundingClientRect();
+
+					var width = renderedRect.width;
+					var height = renderedRect.height;
+
+					expect(height < 50).to.be(true);
+					expect(width < 50).to.be(true);
+					expect(height + width > 0).to.be(true);
+
+					var x = renderedRect.x;
+					var y = renderedRect.y;
+
+					expect(x).to.be.within(299, 301);
+					expect(y).to.be.within(270, 280);
+
+					// Fingers lifted after expects as bug goes away when lifted
+					hand._fingers[0].up();
+					hand._fingers[1].up();
+
+					done();
+				}, 100);
+			}
+		});
+
+		var f1 = hand.growFinger(touchEventType);
+		var f2 = hand.growFinger(touchEventType);
+
+		hand.sync(5);
+		f1.wait(100).moveTo(75, 300, 0)
+			.down().moveBy(200, 0, 500);
+		f2.wait(100).moveTo(525, 300, 0)
+			.down().moveBy(-200, 0, 500);
+	});
 });
diff --git a/src/layer/vector/Renderer.js b/src/layer/vector/Renderer.js
@@ -47,9 +47,8 @@ export var Renderer = Layer.extend({
 		if (!this._container) {
 			this._initContainer(); // defined by renderer implementations
 
-			if (this._zoomAnimated) {
-				DomUtil.addClass(this._container, 'leaflet-zoom-animated');
-			}
+			// always keep transform-origin as 0 0
+			DomUtil.addClass(this._container, 'leaflet-zoom-animated');
 		}
 
 		this.getPane().appendChild(this._container);