Fix gradient “tearing” on fast scroll by moving body gradient to a composited overlay#389
Open
malbaugh wants to merge 2 commits intobrandur:masterfrom
Open
Fix gradient “tearing” on fast scroll by moving body gradient to a composited overlay#389malbaugh wants to merge 2 commits intobrandur:masterfrom
malbaugh wants to merge 2 commits intobrandur:masterfrom
Conversation
…ent in its own compositing layer
getpaid164
approved these changes
Jan 7, 2026
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
2 participants
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.
Closes #388.
Moves the background gradient off
<body>and onto a fixed overlay isolated withcontain: paint. An inner element (.scroll-gradient-bg__inner) carries the background and is translated each frame (viarequestAnimationFramewith DPR-aware rounding). This keeps the gradient in lockstep with content at high scroll velocities and eliminates the visible “tear”.Why the tear happened
I believe the issue was due to the body’s background being painted on the main thread while page content was scrolled via the compositor. Under load those paths can drift out of phase, causing a seam during fast scrolls.
What this change does
.scroll-gradient-bg) that we hint should be its own layer..scroll-gradient-bg__inner) that holds the background and is moved bytransform: translateY(-scrollY).requestAnimationFrameand snaps to device pixels to avoid subpixel seams.ResizeObserver(height recompute + small buffer),MutationObserverfor class/theme toggles, andpagehide/pageshowfor BFCache.containand bails cleanly on unsupported browsers.Performance notes
transformupdates are composite-only (no layout/repaint) and are synchronized with scroll.contain: paint. rAF timing + DPR rounding prevent seams. Main-thread work is reduced by removing the body background paint.Safari rendering note (why the stacking rule is necessary)
WebKit’s accelerated compositing can promote
position: fixedelements into their own layers. In Safari, a fixed element with an explicitz-index(even0) may composite above non-positioned siblings during scrolling, because layer/compositing order can differ from DOM paint order. Without explicit stacking, the overlay can intermittently occlude content or appear to “bleed through.”Manual verification
requestAnimationFrameResizeObserver