fix: tutorial scrollymation racing global smooth-scroll CSS - #77
Merged
Conversation
…l smooth-scroll CSS frontend/src/routes/+layout.svelte sets scroll-behavior: smooth on html globally. every window.scrollTo(0, x) call in the tutorial page relied on being instant, but without an explicit behavior it inherited smooth from that CSS, so the browser animated it asynchronously instead of jumping. this raced against the page's own manual rAF-driven scroll easing and the lock/clamp effect, which reads window.scrollY expecting it to already be at the landing position the moment locked flips true - it wasn't, so the clamp snapped everyone to the topmost bound (Go!). fixes it at the source: every scrollTo call meant to be instant now explicitly passes behavior: 'instant' to override the CSS.
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.
Summary
PR #76 fixed the clamp effect to read
window.scrollYdirectly instead of the lagging reactive binding, but the bug still reproduced on prod after deploy: fresh accounts still snapped straight to Go! on Start.Actual root cause:
frontend/src/routes/+layout.sveltesetsscroll-behavior: smoothonhtmlglobally. Everywindow.scrollTo(0, x)call infrontend/src/routes/tutorial/+page.sveltewas meant to be an instant jump (the page already does its own manual frame-by-frame easing viarequestAnimationFrame), but with no explicitbehaviorargument each call inheritedsmoothfrom that global CSS, so the browser animated it asynchronously on top of the page's own manual animation. When the landing animation finishes andlockedflips true, the clamp effect reads the current scroll position expecting it to already be at the landing spot - it isn't, because the browser's own smooth-scroll is still catching up - so it reads a value belowtopand snaps to the topmost bound (Go!).Fix: every scrollTo call in the tutorial page that's meant to be instant now explicitly passes
behavior: 'instant'to override the CSS.Reproduced live on a throwaway test account before and after the previous fix; this addresses the actual mechanism instead of a stale-read symptom.