What’s the Trick Radix UI Uses to Remove the Scrollbar With Zero Layout Shift (Even When Opening a Dialog)?

[Bjoniii]

I'm trying to understand the technique Radix UI uses on their website to make the scrollbar behave as if it doesn't exist. Specifically:

1. There is 0 layout shift, whether the page has a scrollbar or not.

2. They lock scroll without causing layout changes.

3. The page looks the same whether it is scrollable or not.

I'm especially interested in how Radix Dialog removes the page scrollbar without leaving any empty space on the body behind the dialog.

Normally, when overflow: hidden is applied to , the scrollbar disappears and the viewport becomes wider, causing:

Content to shift horizontally

Or a blank/white space to appear on the right side

But Radix’s Dialog somehow prevents this completely. I want to understand the exact mechanism they use to hide the scrollbar while keeping the page width visually identical, preventing any space from appearing where the scrollbar used to be.

Note: For anyone recommending it, I don’t think scrollbar-gutter: stable is the fix for this.