Better fix for disabling pinch to zoom in a webview zooming the entire editor in chrome

Fixes #84406

Better fix for disabling pinch to zoom in a webview zooming the entire editor in chrome
Fixes #84406
cfbf6b58 · Matt Bierner · f50c8264 · cfbf6b58 · cfbf6b58 · cfbf6b58
3 changed file
--- a/extensions/image-preview/media/main.js
+++ b/extensions/image-preview/media/main.js
@@ -241,7 +241,11 @@
 	});

 	container.addEventListener('wheel', (/** @type {WheelEvent} */ e) => {
-		e.preventDefault();
+		// Prevent pinch to zoom
+		if (e.ctrlKey) {
+			e.preventDefault();
+		}
+
 		if (!image || !hasLoadedImage) {
 			return;
 		}
@@ -260,8 +264,6 @@
 	}, { passive: false });

 	window.addEventListener('scroll', e => {
-		e.preventDefault();
-
 		if (!image || !hasLoadedImage || !image.parentElement || scale === 'fit') {
 			return;
 		}
@@ -270,7 +272,7 @@
 		if (entry) {
 			vscode.setState({ scale: entry.scale, offsetX: window.scrollX, offsetY: window.scrollY });
 		}
-	}, { passive: false });
+	}, { passive: true });

 	container.classList.add('image');


--- a/extensions/image-preview/src/preview.ts
+++ b/extensions/image-preview/src/preview.ts
@@ -203,8 +203,11 @@ class Preview extends Disposable {
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+	<!-- Disable pinch zooming -->
+	<meta name="viewport"
+		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+
 	<title>Image Preview</title>

 	<link rel="stylesheet" href="${escapeAttribute(this.extensionResource('/media/main.css'))}" type="text/css" media="screen" nonce="${nonce}">

--- a/src/vs/workbench/contrib/webview/browser/pre/index.html
+++ b/src/vs/workbench/contrib/webview/browser/pre/index.html
@@ -3,8 +3,11 @@

 <head>
 	<meta charset="UTF-8">
+
+	<!-- Disable pinch zooming -->
 	<meta name="viewport"
 		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 	<title>Virtual Document</title>
 </head>