scrollbar layout shift with dialog, dropdownmenu, etc

[rtkaaho]

For components that remove pointer events when opened, I am noticing a decent amount of layout shift as a result of the scrollbars toggling in and out. That is not something I am noticing on the radix docs site. I was wondering if you could provide any tips/tricks that you have learned to remove some of that layout shift?

[benoitgrelard]

Hey @rtkaaho,

It is actually due to removing the scroll, rather than pointer events.
Under the hood, we use a library called react-remove-scroll which exposes some classes to use to mitigate this.

If you look at our docs code, you'll see some examples of how we use this in places.

Worth looking at also, the lib itself.
It is itself built on top of a more generic one, where you can see the constants exported.

I hope that helps!

[mithleshjs]

@hamidbjss Try this solution #346 (comment)

[gabrielmlinassi]

The solution that worked for me was:

body {
  margin: 0;
}

function onOpenChange(open: boolean) {
    document.body.style.paddingRight = open ? "0px" : "";
}
return (
  <DropdownMenu.Root onOpenChange={onOpenChange}>
    {children}
  </DropdownMenu.Root>
);

[benoitgrelard]

FYI, we have fixed the issue in the upstream package and upgraded the dependency. So the regression should be gone in all the latest release candidates.

#1448

[hamidbjss]

Awesome, thanks @benoitgrelard!

Also thanks to @mithleshjs and @gabrielmlinassi for the suggestions.

[jtabone16]

@benoitgrelard I'm still seeing this issue after updating our select component to 1.0.0. Opening the select shifts our header, which is fixed

[jtabone16]

I'm still seeing this issue after updating our select component to 1.0.0. Opening the select shifts our header, which is fixed

[benoitgrelard]

@jtabone16 I've answered in your other discussion: https://github.com/radix-ui/primitives/discussions/1586?notification_referrer_id=NT_kwDOABd_ObI0MTExNTY4NjgwOjE1Mzk4OTc&notifications_query=is%3Adone#discussioncomment-3302669

[aryanas159]

Putting modal={false} on the root dropdown element fixed it for me.

[Nikkoro]

Thank you @aryanas159 , this is the only solution that works.

[ashik-75]

but it also hide the overlay, any solution for this?

[NoCtrlZ1110]

thank you, you saved my day!