Dropdown - viewport jumps to a random position with two-finger MacOs zoom in

[misha-erm]

Bug report

Current Behavior

When you try to open dropdown menu after using MacOs pinch to zoom the viewport jumps to some random position

Screen.Recording.2022-07-12.at.11.06.01.mov

Expected behavior

Viewport should stay at same position

Reproducible example

This reproduces even on documentation page https://www.radix-ui.com/docs/primitives/components/dropdown-menu#group
CodeSandbox Template

Suggested solution

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)
React	n/a
Browser	Brave	Version 1.40.107 Chromium: 103.0.5060.53 (Official Build) (x86_64)
Assistive tech
Node	n/a
npm/yarn
Operating System

[andy-hook]

Worth noting that this doesn't seem related to remove-scroll, a quick test showed the issue disappeared after removing PopperPrimitive.Content.

Not sure if related but I experienced a similar issue when using DropdownMenu inside an iframe.

[benoitgrelard]

Also seems to be only an issue in Chrome (chromium based I guess), it's not an issue in Safari or Firefox.

[gino]

Seem to be having the same issue, are there any workarounds?

[benoitgrelard]

Hi @gino, we haven't found one yet.

[lukaskl]

Chiming in for collective async debugging. At the moment I have just some clues, not a real solution.

---

It seems that this issue is related to auto focus handling / tabIndex of the DropdownMenu.Content.

Setting <DropdownMenu.Content tabIndex={undefined}> seems to fix jumping screen when zoomed-in, however, that breaks keyboard navigation.

I was able to find a hacky workaround by:

• managing open state myself
• disabling auto-focus
• focusing myself first element once dropdown opens

Looking at this example, I've made the following changes, and it somewhat works:

---

Anyway, this was just an intermediate results from my debugging. Maybe someone will find this useful if not for the hack then maybe for debugging.