[ContextMenu][DropdownMenu] Hidden scrollbars appear when Menu/ContextMenu is active

Bug report

Current Behavior

I’ve tried adding a context menu and a floating menu, and both times there\s a weird behaviour that when they’re active, the scrollbars within the app all appear (I’m on a mac and they’re hidden by default until you scroll)

Expected behavior

I wouldn’t expect this to have any impact on the scrollbars. I’d like the background to be inactive, and unscrollable ideally.

Reproducible example

… let me come back to you, if this isn’t a known issue/easy fix.

Your environment

    "@radix-ui/colors": "^0.1.8",
    "@radix-ui/react-dropdown-menu": "^0.1.6",
    "@radix-ui/react-icons": "^1.1.0",
    "@radix-ui/react-popover": "^0.1.6",
    "@radix-ui/react-slider": "^0.1.4",
    "@radix-ui/react-tooltip": "^0.1.6",
    "react": "17.0.2",

on Chrome 99.0.4844.51, MacOs 12.3

[benoitgrelard]

@tinybrain I believe this is a different thing. If what you want is to keep body scrolling, what you want is to make your menu non-modal (ie. enable actions behind it) by passing the modal={false} prop to the Root part.

[sandgraham]

I have a small workaround for those who don’t want to use modal={true} or overwrite the pointer-events styling used by radix-ui for inert behavior:

https://stackblitz.com/edit/react-y9idvr?file=src/App.js

You can compare the above sandbox to one without the workaround here. (Make sure to have the “While scrolling” setting on)

Essentially we set ::-webkit-scrollbar to display: none for anything outside of our dropdown. The macOS setting that causes the original issue in Chrome creates scrollbars that overlay content rather than the typical scrollbar which pushes content aside. We can use this quirk to safely apply our “hide scrollbar” styles (without causing layout shift).

In the example provided above I use two classes to manage the scrollbar styles: remove-scrollbars which hides scrollbars on itself and its descendants and keep-scrollbars which keeps default scrollbars for itself and descendants. When opening a dropdown we detect the client’s scrollbar width. If it is 0 we can assume it is safe to hide scrollbars and apply the remove-scrollbars class to the body element. We apply the keep-scrollbars class to any part of the app that is still scrollable - which in practice should just be our modal components so this can be static.

I’m not sure if this technique can be made safe for inclusion in Radix UI itself, but for a small amount of code it can help hide this issue in your app (at least until Chrome fixes it).