fix(parallax): pin container to top-left to prevent double scrollbar#2527
Merged
Conversation
The container is position:absolute with no offsets, so it inherited its static position. Host layouts that shift it (e.g. Vite's default place-items:center) pushed the viewport-height container past the viewport, giving the document its own scrollbar on top of the container's. Pin it with top/left so it stays in the viewport. Closes #2255
🦋 Changeset detectedLatest commit: 3b6a9c3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 12 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Pins the
Parallaxcontainer to its top-left corner so a viewport-filling parallax can no longer make the surrounding document scroll.Background
The container is
position: absolutebut set notop/left, so it took its static position. When a host layout offsets that static position — notably theplace-items: centerin Vite's defaultindex.css, which the reporter kept when dropping in the sandbox App — the viewport-height container was pushed below the viewport. The document then grew its own scrollbar on top of the container'soverflow-y: scrollbar, which is the double/inner scrollbar from #2255.A control measurement confirmed the overflow comes from
Parallax, not the host CSS: the identical centring layout with a plain<div>produces zero document overflow, while theParallaxadds ~300px.Fix
Add
top: 0; left: 0to the container so it anchors to its containing block regardless of static-position offsets.Compatibility
For the documented usage (a positioned, full-height parent) this is a no-op — the static position was already top-left. The only rendering change is for a
Parallaxnested in a positioned ancestor that relied on static flow to sit below padding or preceding siblings; it now anchors to the ancestor's top-left. Shipped as a patch with a changeset note.Closes #2255