[Bug]: MenuPopover is transformed/displayed wrong when zoomed in.

[FrietStoofvlees]

Component

Menu

Package version

9.56.8

React version

18.3.1

Environment

System:
  OS: Windows 11 10.0.22631
  CPU: (12) x64 Intel(R) Core(TM) i7-10810U CPU @ 1.10GHz
  Memory: 17.02 GB / 31.78 GB
Browsers:
  Edge: Chromium (131.0.2903.99)
  Internet Explorer: 11.0.22621.3527
npmPackages:
  @fluentui/react-components: ^9.56.8 => 9.56.8 
  @fluentui/react-nav-preview: ^0.10.6 => 0.10.6 
  @types/react: ^18.3.18 => 18.3.18 
  @types/react-dom: ^18.3.5 => 18.3.5 
  react: ^18.3.1 => 18.3.1 
  react-dom: ^18.3.1 => 18.3.1

Current Behavior

The MenuPopover is transformed wrong, and the screen jumps all the way to the left.

20250109-1007-01.4757524.mp4

Expected Behavior

The MenuPopover should be displayed under the button even while zoomed in and as such not jump the screen all the way to the left.

My first guess would be that the calculated transform uses the size of the current screen, which is smaller than the actual screen when zoomed in like that.

Reproduction

https://stackblitz.com/edit/5xyw9tvo

Steps to reproduce

1. Go to Stackblitz
2. Open the preview window in seperate tab. (Important)
3. Connect the preview tab to the stackblitz project (press Connect to Project)
4. Zoom the browser using the scroll zoom (not the zoom using ctrl +)
5. Move the screen to the menu button and press it.
6. The screen jumps all the way to the left and opens the menu there
7. Zoom back out to see the whole page again

I experienced this behaviour in chrome and edge chromium.

Are you reporting an Accessibility issue?

no

Suggested severity

High - No workaround

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.