fix(canvas): block browser pinch-zoom inside breakpoint frame iframes#65
Draft
DavidBabinec wants to merge 1 commit into
Draft
fix(canvas): block browser pinch-zoom inside breakpoint frame iframes#65DavidBabinec wants to merge 1 commit into
DavidBabinec wants to merge 1 commit into
Conversation
`AdminZoomGuard` cancels pinch / ctrl-wheel / Safari gesture browser zoom, but it is installed only on the parent admin document. Each canvas breakpoint frame renders in its OWN iframe document, and wheel/gesture events that originate there never cross the boundary to the parent — so pinch-zooming over a frame (e.g. while hovering its "Switch to … breakpoint" toolbar buttons) zoomed the entire admin page, which is supposed to be locked. The design frame had an ad-hoc wheel forwarder that happened to preventDefault wheel events (to drive canvas pan), but it never handled `gesturestart` / `gesturechange` or multi-touch pinch, and live-preview frames had no guard at all. Install the existing `installAdminZoomGuard` inside every frame document (design and live). The wheel forwarder still routes pan/zoom to the canvas; the guard only cancels the browser's native zoom default. Verified live in the editor: all three frame iframes now cancel ctrl-wheel and gesturestart. Test renders a real CanvasRoot and asserts the frame document cancels pinch/gesture/multi-touch zoom while leaving single-finger scroll alone. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Symptom
Hovering a breakpoint frame's toolbar (e.g. Switch to Tablet breakpoint) and pinch-zooming out on a trackpad zooms the entire admin page — which is supposed to be locked.
Root cause
AdminZoomGuardcancels pinch / ctrl-wheel / Safarigesture*browser zoom, but it's installed only on the parent admin document (main.tsx). Each canvas breakpoint frame renders inside its own iframe document, and wheel/gesture events that originate inside an iframe never cross the boundary to the parent — so the parent guard never sees them.The design frame had an ad-hoc wheel forwarder (
IframeFrameSurface) that happened topreventDefault()wheel events (to drive canvas pan), which masked the issue for plain ctrl-wheel in Chrome — but it never handledgesturestart/gesturechangeor multi-touch pinch, and live-preview frames have no forwarder at all. So pinch over a frame escaped to the browser and zoomed the page.Fix
Install the existing
installAdminZoomGuardinside every frame document (design and live), whereIframeFrameSurfacealready ownsiframeDoc. The wheel forwarder still routes pan/zoom to the canvas; the guard only cancels the browser's native zoom default. One small effect, reusing the shared guard — no new mechanism.Verification
bun run build✓ ·bun run lint✓ ·bun test✓ — 5436 pass, 0 failiframeFrameZoomGuard.test.tsx) renders a realCanvasRootand asserts the frame iframe document cancels ctrl/meta-wheel,gesturestart,gesturechange, and multi-touch pinch, while leaving single-finger scroll alone.ctrlWheelPrevented=trueandgesturestartPrevented=trueinside their iframe documents (thegesturestartblock is the new behavior — before the fix onlywheelwas cancelled, by the forwarder).🤖 Generated with Claude Code