Skip to content

fix: eliminate popover flash and stage cutout jump during anchorless step transitions - #619

Open
saikat709 wants to merge 2 commits into
nilbuild:masterfrom
saikat709:fix/anchoreless-transition-flash
Open

fix: eliminate popover flash and stage cutout jump during anchorless step transitions#619
saikat709 wants to merge 2 commits into
nilbuild:masterfrom
saikat709:fix/anchoreless-transition-flash

Conversation

@saikat709

Copy link
Copy Markdown

Fixes #549

Summary of Changes

When navigating between consecutive tour steps without an attached element (anchorless/modal steps), a white square (.driver-popover) flashed at the CSS default position (top: 0, right: 0), and the overlay stage cutout box briefly jumped/slid towards (0, 0).

This PR fixes the issue across four key areas:

  1. Popover Visibility Guard (packages/driver/src/popover.ts):

    • Set visibility: hidden on popoverWrapper prior to resetting position attributes (left, top, right, bottom) in renderPopover, restoring visibility: "" only after repositionPopover() completes positioning. This eliminates unpositioned popover flashes.
  2. Step Transition State (packages/driver/src/highlight.ts):

    • Refactored isFirstHighlight calculation: !fromStep || !fromElement || (fromElement === toElement && !isToDummyElement).
    • Ensures transitions between consecutive #driver-dummy-element steps preserve hasDelayedPopover = true, enabling smooth popover content reuse without unnecessary teardown gaps.
  3. In-Place Stage Animation (packages/driver/src/overlay.ts):

    • Refactored transitionStage() using a centerOf() helper:
      • Anchored $\rightarrow$ Anchorless: Collapses cutout in-place at the originating element's center.
      • Anchorless $\rightarrow$ Anchored: Expands cutout outward from the destination element's center.
      • Anchorless $\rightarrow$ Anchorless: Renders a zero-cutout full-screen overlay.
  4. Zero-Cutout SVG Path Guard (packages/driver/src/stage.ts):

    • Added an isDummy check in generateStageSvgPathString() so dummy element stages render a full-screen viewport path without cutout subpaths.

Verification & Testing

  • Added comprehensive unit tests in highlight.test.ts, overlay.test.ts, and stage.test.ts.
  • 100% of all 23 unit test files (338 tests) passed cleanly (pnpm --dir packages/driver test:run).
  • Verified in the playground app (pnpm dev) across both fast (150ms), default (400ms), and slow (1500ms) anchorless step transitions.

… steps

- Prevent unpositioned popover flash in popover.ts by hiding wrapper during position recalculation
- Ensure smooth delayed popover transitions in highlight.ts for consecutive anchorless steps
- Animate stage cutout collapse and expansion in-place at element centers in overlay.ts
- Omit SVG cutout path for zero-size dummy element stages in stage.ts
- Update unit tests in highlight.test.ts, overlay.test.ts, and stage.test.ts
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.

Flash of small white square on transition between steps without element

1 participant