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

mjbvz · mjbvz · commit cfbf6b58f68b · 2019-11-12T15:41:41.000-08:00
Fixes microsoft#84406
diff --git 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');
 
diff --git 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}">
diff --git 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>
