Problem with flip/shift when floating element is zoomed

[awysocka]

Describe the bug
I am using an accessibility tool that zooms elements by applying a zoom style to the body of the page. However, when a floating element is zoomed, the flip/shift functionality stops working correctly.

Steps to reproduce the behavior:

1. Apply a zoom level of 1.5 to the body of the page.
2. Open a dropdown menu and gradually make the viewport smaller.
3. Move the floating element towards the edge of the page.
   https://codesandbox.io/p/sandbox/sparkling-wildflower-yj7ccl?file=%2Fsrc%2FApp.js

Actual Behavior
The floating element does not flip correctly and instead shifts outside the boundary of the viewport.

Expected behavior
When the floating element reaches the edge of the viewport, it should either flip or shift to stay within the boundaries of the viewport, even when the page is zoomed.

Screen Record

FloatingUiZoom.mov

Context:

• OS: macOS
• Browser: Chrome
• Version: 124.0.6367.62 (arm64)

[atomiks]

zoom is (used to be?) a deprecated CSS property so it was never properly supported. Only transform: scale(...)