Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: macOS 14.6
    CPU: (14) arm64 Apple M3 Max
    Memory: 104.70 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 128.0.6613.120
    Edge: 128.0.2739.67
    Firefox: 129.0.2
    Safari: 17.6

Are you reporting an Accessibility issue?

None

Reproduction

https://stackblitz.com/edit/u47vqq?file=index.html

Bug Description

Actual 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 whereas innerHeight 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.

Expected Behavior

The scrollbar is not present, so scrollbar-gutter: stable should not be applied and shift the layout

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.