fix (react-dialog): Use consistent rounding for clientHeight and innerHeight #32480
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
When calculating whether scrollbars are present, we compare the body's clientHeight to the window's innerHeight.
In the case when this height is a fractional value,
clientHeight
rounds to the nearest integer whereasinnerHeight
always rounds down. This means when the body is set to 100% height and the browser is at a fractional height (usually due to a non-100% zoom factor), clientHeight often reports being 1 pixel taller than innerHeight.This causes the
scrollbar-gutter: stable
style to be added, which reserves space for the non-existent scrollbar, shifting the layout.Repro:
https://stackblitz.com/edit/u47vqq?file=index.html
New Behavior
Match
innerHeight
's rounding behaviour by usingbody.getBoundingClientRect().height
and manually rounding down.According to mdn,
getBoundingClientRect()
is the equivalent toclientHeight
except it returns the real fractional value: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeightFixes #32481