diff --git a/packages/system/src/xypanzoom/eventhandler.ts b/packages/system/src/xypanzoom/eventhandler.ts
index 751a31c5..78fd9253 100644
--- a/packages/system/src/xypanzoom/eventhandler.ts
+++ b/packages/system/src/xypanzoom/eventhandler.ts
@@ -141,11 +141,20 @@ export function createPanOnScrollHandler({
 
 export function createZoomOnScrollHandler({ noWheelClassName, preventScrolling, d3ZoomHandler }: ZoomOnScrollParams) {
   return function (this: Element, event: any, d: unknown) {
-    // we still want to enable pinch zooming even if preventScrolling is set to false
-    const preventZoom = !preventScrolling && event.type === 'wheel' && !event.ctrlKey;
+    if (event.type === 'wheel') {
+      const isPinch = event.ctrlKey;
+      // we still want to enable pinch zooming even if preventScrolling is set to false
+      const preventZoom = !preventScrolling && !isPinch;
+      const isNoWheel = isWrappedWithClass(event, noWheelClassName);
 
-    if (preventZoom || isWrappedWithClass(event, noWheelClassName)) {
-      return null;
+      // if user is pinch zooming above a nowheel element, we don't want the browser to zoom
+      if (isPinch && isNoWheel) {
+        event.preventDefault();
+      }
+
+      if (preventZoom || isNoWheel) {
+        return null;
+      }
     }
 
     event.preventDefault();