fix(react): use exact width for Sticky placeholder - #36487
Draft
AKnassa wants to merge 1 commit into
Draft
Conversation
Sticky computed its placeholder width as scrollWidth + (offsetWidth - clientWidth). All three DOM properties are rounded to integers while the true layout width can be fractional (typically under browser zoom), so the placeholder could end up 1-2px wider than the content, making ScrollablePane show a phantom horizontal scrollbar that disappears after scrolling back to the top. When the content has no genuine horizontal overflow (scrollWidth <= clientWidth), use the exact fractional getBoundingClientRect().width instead. Content that really overflows keeps the previous computation. Red-first test locks both branches: fractional width is used when nothing overflows, the legacy sum when it does. Sticky and ScrollablePane suites green with no snapshot churn. Fixes microsoft#29383
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.
Previous Behavior
Inside a ScrollablePane, sticky headers sometimes made a horizontal scrollbar appear when nothing actually overflowed — most often under browser zoom. Scrolling back to the top made the scrollbar vanish, which looked like a glitch. Cause: the sticky placeholder's width was computed from browser measurements that are rounded to whole pixels, so it could come out 1–2px wider than the real content.
New Behavior
No phantom scrollbar. When the content doesn't genuinely overflow sideways, the placeholder now uses the exact fractional width of the content. Content that really does overflow keeps the old calculation, so nothing else changes.
What changed
Sticky and ScrollablePane suites are green with no snapshot changes. One note for reviewers: the exact-width path measures post-transform size, so apps scaling content with
transform: scale()get the scaled width — the measurement the issue reporter themselves proposed.Related Issue(s)