Skip to content

fix: recalculate spotlight overlay position on scroll events#1011

Merged
magic-peach merged 2 commits into
magic-peach:mainfrom
Arsh-sudo:fix/spotlight-scroll-recalculate
May 24, 2026
Merged

fix: recalculate spotlight overlay position on scroll events#1011
magic-peach merged 2 commits into
magic-peach:mainfrom
Arsh-sudo:fix/spotlight-scroll-recalculate

Conversation

@Arsh-sudo
Copy link
Copy Markdown
Contributor

Summary

Closes #913

Fixes the spotlight overlay drifting away from its target element when
the user scrolls during the onboarding tour.

Root Cause

The spotlight used getBoundingClientRect() to position itself, which
returns viewport-relative coordinates. When the user scrolled, the stored
targetRect became stale — the coordinates no longer matched the element's
actual position — causing the spotlight to highlight unrelated content.

The component already had a resize listener that re-measured on window
resize, but no equivalent for scroll events.

Fix

Added a scroll event listener alongside the existing resize listener in
the re-measure useEffect:

window.addEventListener("scroll", remeasure, true);

Using capture phase (true) ensures scroll events from nested scrollable
containers are also caught, not just window-level scrolling.

The cleanup function removes both listeners correctly on unmount.

Files Changed

  • src/components/OnboardingTour.tsx — added scroll listener, renamed
    onResize to remeasure for clarity

Testing

  1. Start the onboarding tour
  2. Scroll the page during any step
  3. Spotlight should remain anchored to the target element

@vercel
Copy link
Copy Markdown

vercel Bot commented May 23, 2026

@Arsh-sudo is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added level:beginner Beginner level - 20 pts type:bug Bug fix type:refactor Code refactor type:testing Testing labels May 23, 2026
@github-actions
Copy link
Copy Markdown
Contributor

👋 Thanks for your PR, @Arsh-sudo!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

What happens next

  1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
  2. Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
  3. 👀 Code review — a maintainer will review your changes
  4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

  • PR title follows Conventional Commits (e.g. feat: add dark mode)
  • Linked the issue this PR closes (e.g. Closes #123)
  • Tested the changes locally (bun run dev)
  • Build passes (bun run build)

Useful links

Happy coding! 🎉

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 23, 2026

✅ PR Format Check Passed — @Arsh-sudo

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.

@Arsh-sudo
Copy link
Copy Markdown
Contributor Author

Performance Improvement

Wrapped the remeasure callback in requestAnimationFrame to prevent
layout thrashing on rapid scroll/resize events. Any pending frame is
cancelled before scheduling a new one, binding recalculation strictly
to the browser's rendering cycle.

The spotlight overlay was using stale getBoundingClientRect() coordinates
after the user scrolled, causing it to drift and highlight unrelated content.

Added a scroll event listener alongside the existing resize listener that
re-measures the target element position on every scroll event. Using
capture phase (true) ensures all scroll events are caught including those
from nested scrollable containers.

Closes magic-peach#913
@Arsh-sudo Arsh-sudo force-pushed the fix/spotlight-scroll-recalculate branch from 43582c9 to 20382ed Compare May 24, 2026 04:53
@magic-peach magic-peach added gssoc'26 GirlScript Summer of Code 2026 gssoc:approved Approved for GSSoC'26 labels May 24, 2026
@magic-peach magic-peach merged commit dda01f6 into magic-peach:main May 24, 2026
9 of 10 checks passed
@magic-peach
Copy link
Copy Markdown
Owner

Merged! This cleanly fixes the spotlight overlay drifting during scroll — adding a scroll listener with capture phase alongside the existing resize listener is exactly the right fix. Using requestAnimationFrame to debounce rapid events is a nice touch too. All CI checks passed. Great work @Arsh-sudo!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc:approved Approved for GSSoC'26 gssoc'26 GirlScript Summer of Code 2026 level:beginner Beginner level - 20 pts type:bug Bug fix type:refactor Code refactor type:testing Testing

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG]: Tutorial spotlight overlay moves incorrectly while scrolling

2 participants