Pinch gesture zooming sometimes invokes OS zoom behavior

Overview

On macOS/Chrome you can use the pinch gesture on the trackpad to invoke an OS level zoom in the browser. We handle and prevent that event and instead invoke the XB Canvas zoom.

There is a bug however that occurs if, as a result of the canvas zooming, the mouse cursor moves from being over the iFrame to being not over the iFrame. When that transition happens, for some reason, the native OS zoom behaviour kicks in.

In this gif, you can see that after zooming in which correctly just zooms the canvas, during the zoom out the mouse cursor moves out of the preview iFrame (or rather the preview iFrame gets smaller and moves out from under the mouse) and as that happens the OS zoom takes over (and suddenly the whole XB UI starts to be affected by the zoom)

Proposed resolution

The pinch gesture is handled in the browser as a "wheel" event where event.ctrlKey is true. You can find where we handle the wheel event in the XB codebase in Canvas.tsx and useIframeKeyHandlers.ts.

I believe there are 'gesturestart' and 'gestureend' events that may (or may very well not!) be in some way part of the solution to this issue.

User interface changes