radix-ui
Dropdown - viewport jumps to a random position with two-finger MacOs zoom in
Bug report
Current Behavior
When you try to open dropdown menu after using MacOs pinch to zoom the viewport jumps to some random position
https://user-images.githubusercontent.com/8783498/178441963-27825d47-69e9-42fe-a8a2-2a4a40561e66.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 |
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.
Also seems to be only an issue in Chrome (chromium based I guess), it's not an issue in Safari or Firefox.
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.
