MenuPortal - horizontal position of menu is incorrect when browser is zoomed

[davidlucas]

A portaled menu when viewed on iOS Safari in a zoomed state on an iPhone/iPad has the wrong horizontal position.

This can be reproduced using the example on the website - https://react-select.com/advanced#portaling

[bladey]

[AmrineA]

This can also be replicated on Chrome using the portal example. If you open the portal drop down and then resize the window horizontally, you will see it move.

We've noticed this issue also when a site header resizes with scrolling. For example, the header of a site might be 200px until the user scrolls down and then it resizes to 100px. At that point, the menu items "detach" from the menu control. It appears the menu items will "reattach" when the mouse pointer hovers over the menu items.

[andrzejwalk]

Any workaround for this?

[ebonow]

Confirmed that this behavior exists but not sure what if anything can be done. It appears that there is no standard in place to identify if a viewport has been "zoomed"
https://css-tricks.com/can-javascript-detect-the-browsers-zoom-level/

It should also be noted that the menu "snaps" back into its expected position when the menu/option is hovered. This leads me to believe that it may be related to some other behavior that prevents the menu from staying positioned as expected:
#4336
#4375
#4159

They all share similar behavior in that the scroll position is offset from what is expected but then snaps into place once the menu is hovered. I think it may be worth consolidating these into a single use-case to better identify the root.

In this particular use-case though, I'm not sure how to detect a change in zoom or if there is some other means of positioning that should be considered.

[ebonow]

Similar and perhaps related behavior
#3499

[odusseys]

getting the same issue with no zoom (on desktop, chrome, mac)

[marius-m2]

Not sure if this helps but, one workaround you can try is to set a negative marginThreshold to offset the difference between the zoomed (height or width) and actual size.
In my case I had a fixed height of 540 and a zoom of 0.5 and it totally messed up the Popover. I've added a marginThreshold(https://v4-9-14.material-ui.com/api/popover/) of -500 to offset the zoom difference(you can obviously create it a bit more dynamic).