Middle click + drag doesn't work correctly if middle click is inside preview iframe

Problem/Motivation

Work to improve the UX of the panning/zooming of the canvas has been done - the controls are now using the canvas' scroll position rather than translating the div with CSS - this means using a trackpad on a mac works.

When using a mouse, a user should be able to hold middle mouse button and drag to pan around. This works if the user's initial middle mouse click is outside of the preview iframe but does not work if that initial click is somewhere inside the iFrame.

Steps to reproduce

Move your mouse outside of the iframe
Click and hold down the middle mouse button
Move the mouse
observe that the canvas view pans around
release the middle mouse button.

Now
Move your mouse OVER the iframe
Click and hold down the middle mouse button
Move the mouse
observe that the canvas view DOES NOT pan around
release the middle mouse button.

Proposed resolution

On mouse down, I set the iFrame's CSS pointer-event property to 'none' - hoping that the mouse move will then be on the parent document however this doesn't work.

A different solution is required - perhaps displaying a transparent div on middlemouse down over the iframe that intercepts the mousemove events?
Perhaps using postmessages to pass the mousemove events from the iframe up to the parent?