Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11700 @ 2.50GHz
    Memory: 8.99 GB / 31.73 GB
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (117.0.2045.47)
    Internet Explorer: 11.0.19041.1566

Are you reporting Accessibility issue?

None

Reproduction

https://codesandbox.io/s/upbeat-torvalds-9dghsy

[procedure]

• shorten the window height until vertical scrollbar appears
• scroll down to the bottom
• shorten the window width until horizontal scrollbar barely appears
• scroll up to the top

[unexpected result]

• as soon as you reach the top, the horizontal scrollbar disappears

Bug Description

Actual Behavior

The width in "div" style set by Sticky can be different than the width of original component, especially when the browser is magnified.
This can result in an unnecessary horizontal scroll bar.
The inappropriate style is caused by the numerical error in

        width =
          this.nonStickyContent.firstElementChild.scrollWidth +
          ((this.nonStickyContent.firstElementChild as HTMLElement).offsetWidth -
            this.nonStickyContent.firstElementChild.clientWidth);

https://github.com/microsoft/fluentui/blob/master/packages/react/src/components/Sticky/Sticky.tsx#L239-L242
because scrollWidth, offsetWidth and clientWidth return integers.

Expected Behavior

Precise width calculation (maybe using getBoundingClientRect and getClientRect?) is done to prevent the extra horizontal scroll bar.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

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.