fix: recalculate spotlight overlay position on scroll events#1011
Conversation
|
@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. |
👋 Thanks for your PR, @Arsh-sudo!Welcome to Reframe — a browser-based video editor built for everyone 🎬 What happens next
Quick checklist
Useful links
Happy coding! 🎉 |
✅ PR Format Check Passed — @Arsh-sudoBasic 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. |
Performance ImprovementWrapped the remeasure callback in |
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
43582c9 to
20382ed
Compare
|
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 |
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, whichreturns viewport-relative coordinates. When the user scrolled, the stored
targetRectbecame stale — the coordinates no longer matched the element'sactual 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:Using capture phase (
true) ensures scroll events from nested scrollablecontainers 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, renamedonResizetoremeasurefor clarityTesting