Page scroll removed upon dialog display, and that makes layout jump

[warm-tune]

Default example of dialog work from the documentation shows that page scroll is removed when dialog is open.
That makes layout jump a bit. I am switching from mantine framework, and there dialog displayed above the page without affecting scroll state. How can I achieve the same behaviour using zagjs?

How to avoid that jumping behaviour as it spoils ux? No reason to make it jumping on dialog show.

Thanks in advance.

[anubra266]

@warm-tune repro? cant figure out what issue you're facing

[anubra266]

@warm-tune what browser ansd OS is this?

[warm-tune]

Mac Os ventura 13.7.6 (22H625)

Brave 1.88.136 (Official Build) (arm64)
Chromium: 146.0.7680.164

But I can assume that issue is in the scrollbar, that removed upon dialog show.

[anubra266]

I'm not having the same issue @warm-tune on chrome hence me asking the browser, maybe scrollbar behaves differently. I see a visual difference though, at least on chrome, scrollbar overlays the page, but in yours there's a layout just for scrollbar

[warm-tune]

I have checked chrome - it behaves differently, indeed. On chrome i see that scroll bar hides, but layout not affected.
Would you consider this issue for investigating and fixing? Brave is pretty popular browser.

[anubra266]

@warm-tune I can't reproduce it in this version:

[anubra266]

@warm-tune try doing this in your css, lemme know if it fixes it for your browser:

html {
  scrollbar-gutter: stable;
}

[warm-tune]

With that property no ui jumping but gutter is visible, and that spoils it a bit.

[warm-tune]

@anubra266 Seems to be I got what is the problem.
I keep open https://zagjs.com/components/react/dialog in the browser on 27" monitor, and that browser occupied one half of the screen. 1280px.
If i resize window to 1500px or more - ui is not jumping on dialog open.

I may assume that problem is in the site itself, not in the dialog component. Could you confirm?