canvas: a two-finger pan over a board no longer goes back a page - #59
Merged
Conversation
A wheel event whose target is inside an iframe never reaches the parent document. tldraw stops this gesture by calling preventDefault on the wheel that reaches its container (useGestureEvents, bound passive:false), so over a board that call never happens and the browser takes the horizontal component as a back navigation. The page's own overscroll-behavior: none cannot help: overscroll chains one frame at a time, and a board's document declares nothing. be13507 fixed the case it could see by putting the board iframe behind its container, which also lets the pan reach tldraw. That line stays — it does the other half of the job — but it only applies to a board that is not being edited, and it is not available to the other two iframes: the inspector's preview is meant to take input, and the link card's cover sits on an opaque background, so a negative z-index there would paint it out of existence. What all three share is the HTML, so the fix goes there: every board is loaded with a style tag that stops overscroll in its own document. Appended rather than spliced, because 37 of the 180 boards emit no </body> and a tag before the doctype would mean quirks mode.
Deploying super-prototyping with
|
| Latest commit: |
a2c90e1
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a8751d2d.super-prototyping.pages.dev |
| Branch Preview URL: | https://fix-swipe-back.super-prototyping.pages.dev |
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
1 participant
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.
The bug
Cursor over a board on the canvas, two-finger swipe left to pan — the browser goes back a page.
Root cause
A wheel event whose target is inside an
<iframe>never reaches the parent document. tldraw's own answer to this gesture is topreventDefaultthe wheel that reaches its container (useGestureEvents, bound with{passive: false}) — over a board, that call never happens, and the browser reads the horizontal component as history navigation. The page's ownoverscroll-behavior: noneincanvas/src/index.csscannot reach in: overscroll chains one frame at a time, and a board's document declares nothing. tldraw sets that property only on its own UI panels, never on the canvas, for the same reason — the canvas relies on the wheel handler.be13507 fixed the case it could see, by putting the board iframe behind its container (
zIndex: -1), which also does the second half of the job: it lets the pan actually reach tldraw. That line stays. But it only applies to a board that is not being edited, and it is not available to the other two iframes — the inspector's preview is meant to take input, and the link card's cover sits on an opaque white background, so a negative z-index there would paint it out of existence.The fix
What all three iframes share is the HTML, so the fix goes there:
loadCanvasFileHtmlappends<style>html{overscroll-behavior:none}</style>to every board. One place, and a fourth iframe cannot miss it.Appended rather than spliced before
</body>: 37 of the 180 boards emit none, and a tag put before the doctype would drop the board into quirks mode. A trailing<style>is parsed into the body, and the inspector agent already skipsSTYLEelements (inspectorAgent.ts:292), so this adds no layer to the inspector.Verified
bun run lint,bun run test(85 passing, one new),bun run build.scripts/bump-version.sh --check: all 7 agree on 1.1.0.Checklist
ref-*.html,assets/refs/or other third-party captures are in this PR.## Unreleasedline.