Skip to content

fix(zoom): let the copy fly past the stage's edges when it opens and closes - #368

Merged
vite-hub[bot] merged 2 commits into
mainfrom
fix/zoom-close-clip
Nov 6, 2026
Merged

vite-hub[bot] merged 2 commits into
mainfrom
fix/zoom-close-clip

Conversation

@onmax

@onmax onmax commented Nov 6, 2026

Copy link
Copy Markdown
Owner

When a zoomed item has an aside (a screenshot's notes), the stage ends where the aside's column starts. The stage has overflow:hidden, so the copy flying back to the page, or out from it, was cut off at that edge. The same happened at the header and footer.

While the copy flies, the stage now carries data-flying, which turns its clipping off and draws it above the header, aside, and footer. A stage that stops clipping loses its scroll position and its scrollbar, so the copy is measured before and after and moved back with translate. The attribute goes once the opening animation ends.

Two e2e tests: one freezes the open and close animations and checks the part of the copy over the aside's column can be hit (it fails on main), and one checks a scrolled copy starts its close from where it is.

🤖 Generated with Claude Code

@chatgpt-codex-connector

Copy link
Copy Markdown
Codex Review Summary: ❌ Failed

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ❌ Failed 2026-11-06T08:07:33.495871Z
We couldn’t complete this review. Comment @codex review to try again.
9c8c063 PR opened
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@chatgpt-codex-connector

Copy link
Copy Markdown

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

@pullfrog pullfrog Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Important

Closing during the opening animation can discard the new position compensation and make the copy jump.

Reviewed changes in 9c8c063, covering the zoom animation geometry, temporary overflow state, and new browser tests.

  • Flying stage state Temporarily makes the stage unclipped and raises it over the dialog chrome while the copy travels.
  • Geometry compensation Measures the frame before and after changing overflow and preserves its screen position with CSS translate.
  • Browser coverage Adds checks for aside-edge clipping and closing a scrolled tall copy from its current position.

Pullfrog  | Fix all ➔ | Fix 👍s ➔ | View workflow run | Using gpt-5.6-sol | 𝕏

Comment thread packages/zoom/src/script.ts Resolved
@pkg-pr-new

pkg-pr-new Bot commented Nov 6, 2026 •

Copy link
Copy Markdown

Open in StackBlitz

comark-annotate

pnpm add https://pkg.pr.new/comark-annotate@368

comark-badge

pnpm add https://pkg.pr.new/comark-badge@368

comark-cards

pnpm add https://pkg.pr.new/comark-cards@368

comark-carousel

pnpm add https://pkg.pr.new/comark-carousel@368

comark-cast

pnpm add https://pkg.pr.new/comark-cast@368

comark-charts

pnpm add https://pkg.pr.new/comark-charts@368

comark-chat

pnpm add https://pkg.pr.new/comark-chat@368

comark-chips

pnpm add https://pkg.pr.new/comark-chips@368

comark-cjk

pnpm add https://pkg.pr.new/comark-cjk@368

comark-code

pnpm add https://pkg.pr.new/comark-code@368

comark-code-notes

pnpm add https://pkg.pr.new/comark-code-notes@368

comark-colors

pnpm add https://pkg.pr.new/comark-colors@368

comark-comments

pnpm add https://pkg.pr.new/comark-comments@368

comark-critic

pnpm add https://pkg.pr.new/comark-critic@368

comark-deflist

pnpm add https://pkg.pr.new/comark-deflist@368

comark-details

pnpm add https://pkg.pr.new/comark-details@368

comark-diagrams

pnpm add https://pkg.pr.new/comark-diagrams@368

comark-diff

pnpm add https://pkg.pr.new/comark-diff@368

comark-embed

pnpm add https://pkg.pr.new/comark-embed@368

comark-fields

pnpm add https://pkg.pr.new/comark-fields@368

comark-figure

pnpm add https://pkg.pr.new/comark-figure@368

comark-file-tree

pnpm add https://pkg.pr.new/comark-file-tree@368

comark-footnotes

pnpm add https://pkg.pr.new/comark-footnotes@368

comark-github

pnpm add https://pkg.pr.new/comark-github@368

comark-icon

pnpm add https://pkg.pr.new/comark-icon@368

comark-include

pnpm add https://pkg.pr.new/comark-include@368

comark-keys

pnpm add https://pkg.pr.new/comark-keys@368

comark-links

pnpm add https://pkg.pr.new/comark-links@368

comark-linter

pnpm add https://pkg.pr.new/comark-linter@368

comark-magic-move

pnpm add https://pkg.pr.new/comark-magic-move@368

comark-mark

pnpm add https://pkg.pr.new/comark-mark@368

markdown-it-to-comark

pnpm add https://pkg.pr.new/markdown-it-to-comark@368

marked-to-comark

pnpm add https://pkg.pr.new/marked-to-comark@368

comark-mathml

pnpm add https://pkg.pr.new/comark-mathml@368

comark-media

pnpm add https://pkg.pr.new/comark-media@368

comark-metrics

pnpm add https://pkg.pr.new/comark-metrics@368

migrate-to-comark

pnpm add https://pkg.pr.new/migrate-to-comark@368

comark-outline

pnpm add https://pkg.pr.new/comark-outline@368

comark-properties

pnpm add https://pkg.pr.new/comark-properties@368

comark-qr

pnpm add https://pkg.pr.new/comark-qr@368

comark-quiz

pnpm add https://pkg.pr.new/comark-quiz@368

comark-reading-time

pnpm add https://pkg.pr.new/comark-reading-time@368

remark-to-comark

pnpm add https://pkg.pr.new/remark-to-comark@368

comark-sources

pnpm add https://pkg.pr.new/comark-sources@368

comark-steps

pnpm add https://pkg.pr.new/comark-steps@368

comark-table

pnpm add https://pkg.pr.new/comark-table@368

comark-tabs

pnpm add https://pkg.pr.new/comark-tabs@368

comark-tests

pnpm add https://pkg.pr.new/comark-tests@368

comark-time

pnpm add https://pkg.pr.new/comark-time@368

comark-ui

pnpm add https://pkg.pr.new/comark-ui@368

comark-xref

pnpm add https://pkg.pr.new/comark-xref@368

comark-zoom

pnpm add https://pkg.pr.new/comark-zoom@368

commit: f8017c9

@vite-hub

vite-hub Bot commented Nov 6, 2026 •

Copy link
Copy Markdown
Contributor
Session Status Started Duration
Pending Completed Not started —
View session Completed 2026-11-06T08:24:17.399Z 11m 21s

Latest result

Pull request merged.

Final answers

Session

Pull request merged.

View session

Pushed f8017c9 fixing Pullfrog P1: closing mid-open discarded position compensation. Escape regressions at 0/130/259ms reproduced the jump before the fix. `playwright test e2e/zoom.e2e.ts --workers=1`: 23 passed; package `vp test run test/zoom.test.ts`: 10 passed. Focused typecheck and formatting passed; lint passed with one existing warning. Resolved the thread; awaiting CI.

@pullfrog pullfrog Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ No new issues found.

Reviewed changes since the prior Pullfrog review, covering the interrupted-opening fix and its browser regression coverage.

  • Preserved flight compensation Made fly() idempotent while data-flying is active, retaining the independent CSS translate when closing cancels an in-progress opening animation.
  • Covered interruption timing Added browser cases that close at the start, midpoint, and final frame of opening and verify the copy remains at its current screen position.

Pullfrog  | View workflow run | Using gpt-5.6-sol | 𝕏

@vite-hub
vite-hub Bot merged commit 67d33f3 into main Nov 6, 2026
6 checks passed
@vite-hub
vite-hub Bot deleted the fix/zoom-close-clip branch November 6, 2026 09:07
This was referenced Nov 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant