Able to reproduce this using the Context Menu component in @radix-ui/[email protected]🙂

Is there already a solution to this problem?

Hi @chesterhow,

Yeah this is strange, we specifically enabled pinchZooming on react-remove-scroll:

We made this change in this PR: #1514 for exactly the reasons you are talking about.

Unfortunately, if the fix is not made upstream, there isn't much we can do at the moment. We did experiment with ditching react-remove-scroll but haven't had the bandwidth to pursue this further.

I would suggest you all continue working with the upstream library to push for a fix which we can then integrate.

🙏

I just ran into this today, the way I got it working is a bit hacky:
Idea is to set body's overflow to hidden when dialog is opened to prevent scrolling behavior of content behind the dialog and then set it back to initial once closed.

• Change Dialog.Overlay into a normal div
• Add this to Dialog.Root

onOpenChange={() => {
        if (open) {
          document.body.style.overflow = "initial"
        } else {
          document.body.style.overflow = "hidden"
        }
...
}}

Note: since the state changes asynchronously I put the if statement with a "counter-intuitive" condition before applying setOpen(!open)

I use pnpm, so I can use overrides and pnpm patch to resolve the issue by patch react-remove-scroll.

It is a neat resolution that everyone can take without breaking structures of dependencies.

1. Make sure you use pnpm.
2. In your root package.json, override react-remove-scroll package to the latest version 2.5.7:

{
  ...
  "resolutions": {
    "react-remove-scroll": "2.5.7"
  }
}

3. execute pnpm install to make use of only one version of react-remove-scroll. If you didn't install react-remove-scroll at any place, nor any workspaces yet, just install this package to the workspace that depends on radixui dialog / shadcn before you override package.
4. execute pnpm patch [email protected], it will tell you to move on to a tmp directory to fix this lib.
5. find the code at dist/esXXX/SideEffect.js(XXX means multiple directories es5 / es2015/es2019):
   https://github.com/theKashey/react-remove-scroll/blob/bd8d6433319b67eabf350d7ec2fa4f17627af417/src/SideEffect.tsx#L57

and change this condition to

if (('touches' in event && event.touches.length === 2) || (event.type === 'wheel' && event.ctrlKey)) {
...
}

This is because it dose not support pinch zoom action on magic track pad, which event is wheel + ctrlKey
6. just do as it tells you, execute pnpm patch-commit XXXXX

now you can pinch and zoom on the dialog.

A related problem is that this disables other gestures like swipe back, so if you, for instance, have a route that is opened in a dialog, that breaks the gesture for back.

@tangye1234

Thank you for your solution!
I've created react-remove-scroll PR with your solution, and it's already been merged and v2.6.0 released.

Therefore, this issue should be solved if the package.json of radix-ui can be updated.
I will create a new Pull Request.