[bug]: Drawer hides scrollbar and causes page to resize

[gabriel-mopereira]

Describe the bug

By default, when opened, the Drawer add classes to both the html and body, removing the scrollbar and adding some classes to compensate for it, but the page in the background still resizes.

Gravacao.de.Tela.2024-07-17.as.16.01.12.mp4

I don't know if that's an expected behavior, since the Drawer is mainly used in mobile and that doesn't seem to happen there.

Troubleshooting

• I tried applying the zeroRight class from the library to both the html and body (separately), but that was ignored when the Drawer opened.
• I tried scrollbar-gutter as well but that would be ignored when the Drawer was opened.
• In my search for a solution, I saw many people complaining about the Radix Dialog having problems with position fixed.
• I added the noBodyClasses prop on the Drawer as false, which stops the Drawer from adding the following classes to the body component:

Which allowed the following classes, added by react-remove-bar, to be active (I can't actually tell if it indeed comes from the library, I'm assuming that based on the names).

Now that the body is display relative, the padding added to the html works as well as the margin-right in the body, creating a double-compensation for the lack of scrollbar. At first I tried removing the margin, and at first glance that seemed to solve the problem, but then realized that when you move the Drawer around, the padding applied in the html is set to 0px, causing the page to resize again.

My workaround

I've added the noBodyClasses prop to false as default in the component and removed the shouldScaleBackground as it made no sense to me to leave it as true by default:

// If you want you can declare this props when using the Drawer, but in my case it made more sense to do it this way.
const Drawer = ({
  noBodyStyles = true,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
  <DrawerPrimitive.Root noBodyStyles={noBodyStyles} {...props} />
);
Drawer.displayName = "Drawer";

and the following code to the global.css file:

@layer base {
  html {
    padding-right: 0px !important;
  } 
}

So far I found no drawbacks in using the Drawer that way. No margin is added to the page when there's no scrollbar and the Drawer worked the same in the mobile*. I think this happens due to something in the Vaul library (as using the noBodyClasses and some CSS tweaks solve the issue), but I don't think I have the knowledge required to fix it directly in there.

*Its top is being hidden by the dynamic URL bar in the bottom of the mobile nav, but I think this is easily solvable with dvh. I haven't tried it yet.

Affected component/components

Drawer

How to reproduce

This behavior can be seen in the Shadcn's Drawer component page, although it's not that noticeable as in my example 'cus they're using the Scale Background thing.

1. Go to Shadcn's Drawer page
2. Open the first Drawer and close it paying attention to the resize that happens when the scrollbar is rendered
3. To make it more noticeable, you can open the dev tools and resize the page to a size where the components in the page are more cramped

This will not happen if you toggle device toolbar

Codesandbox/StackBlitz link

https://ui.shadcn.com/docs/components/drawer

Logs

No response

System Info

Mac M1 running Sonoma 14.4.1, 
Arc Browser 1.51.0 (51691)

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[subhasishdasfreelance]

Same issue. Stuck for 2 days

[soheil0082]

having the same issue here but for sheet and select components

[David-Llanes]

having the same issue here but for sheet and select components

@soheil0082 just try using the atribute modal=true in the component. Usually is the root component:

[Jiyur]

Try setting the property named preventScrollRestoration={true} on <Drawer>, it works for me

[cdelehanty]

Having the same issue. Setting disablePreventScroll={false} on <Drawer> fixes this for me. Thank you @Jiyur!