Skip to content

fix(react-drawer): report bottom scroll state at fractional browser zoom - #36677

Open
Frank Nambeh (Frank20021) wants to merge 1 commit into
microsoft:masterfrom
Frank20021:fix/36331-drawer-scroll-bottom-tolerance
Open

fix(react-drawer): report bottom scroll state at fractional browser zoom#36677
Frank Nambeh (Frank20021) wants to merge 1 commit into
microsoft:masterfrom
Frank20021:fix/36331-drawer-scroll-bottom-tolerance

Conversation

@Frank20021

Copy link
Copy Markdown

getScrollState compared scroll offsets for exact equality, but browsers round clientHeight and scrollHeight to integers while scrollTop stays fractional. At non-integer browser zoom a fully scrolled DrawerBody therefore reported middle instead of bottom, which kept the divider above NavDrawerFooter visible. The same rounding can make a non-scrollable body report a pixel of overflow it cannot actually scroll, reporting top and showing the divider on a drawer with nothing to scroll.

Compare both with a tolerance instead. Measured against Chromium across 31 zoom levels from 100% to 250%, the bottom offset falls up to 1.44px short of the computed maximum, and phantom overflow is at most 1px. Behaviour at 100% zoom is unchanged.

Fixes #36331

Previous Behavior

New Behavior

Related Issue(s)

  • Fixes #

`getScrollState` compared scroll offsets for exact equality, but browsers round
`clientHeight` and `scrollHeight` to integers while `scrollTop` stays fractional.
At non-integer browser zoom a fully scrolled DrawerBody therefore reported
`middle` instead of `bottom`, which kept the divider above NavDrawerFooter
visible. The same rounding can make a non-scrollable body report a pixel of
overflow it cannot actually scroll, reporting `top` and showing the divider on a
drawer with nothing to scroll.

Compare both with a tolerance instead. Measured against Chromium across 31 zoom
levels from 100% to 250%, the bottom offset falls up to 1.44px short of the
computed maximum, and phantom overflow is at most 1px. Behaviour at 100% zoom is
unchanged.

Fixes microsoft#36331

Co-authored-by: Cursor <cursoragent@cursor.com>
@Frank20021

Copy link
Copy Markdown
Author

@microsoft-github-policy-service agree

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the more complete fix: the tolerances are backed by measured fractional-zoom behavior, it also handles phantom 1px overflow, and it includes regression coverage.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: NavDrawer shows divider above Footer when scrolled to the bottom

2 participants