diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 55da4d15ce5ef1..00e9de305c9fb0 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -40,15 +40,17 @@ function bubbleEvent( event, Constructor, frame ) { init[ key ] = event[ key ]; } - // Check if the event is a MouseEvent generated within the iframe. - // If so, adjust the coordinates to be relative to the position of - // the iframe. This ensures that components such as Draggable - // receive coordinates relative to the window, instead of relative - // to the iframe. Without this, the Draggable event handler would - // result in components "jumping" position as soon as the user - // drags over the iframe. + // Check if the event is a MouseEvent generated within the iframe. If so, + // adjust the coordinates by the iframe’s position and scale. This ensures + // that components such as Draggable receive coordinates relative to the + // window, instead of relative to the iframe. Without this, such component’s + // would have to deal with "jumps" in the coordinates whenever the pointer + // enters or exits the iframe. if ( event instanceof frame.contentDocument.defaultView.MouseEvent ) { const rect = frame.getBoundingClientRect(); + const scale = rect.width / frame.offsetWidth; + init.clientX *= scale; + init.clientY *= scale; init.clientX += rect.left; init.clientY += rect.top; }