Skip to content

scrollbar gap replacement not required when scrollbar-gutter set to stable. #2807

@Hugos68

Description

@Hugos68

🐛 Bug report

When:

html {
  scrollbar-gutter: stable;
}

Is set, the document doesn't shift when the scrollbar is there or not, but Zag still adds a 10px gap to replace the scrollbar causing the entire page to shift

💥 Steps to reproduce

  1. Click "Open Dialog"
  2. See the gap on the right side of the screen (the red header shows this the best)

💻 Link to reproduction

Stackblitz reproduction: https://stackblitz.com/edit/aeybovqd?file=src%2FDialog.tsx

🧐 Expected behavior

There should not be a gap on the right side of the screen

🧭 Possible Solution

Either zag needs to not add that 10px gap when scrollbar-gutter: stable is detected or even better, zag should apply scrollbar-gutter: stable themselves instead of the 10px gap.

If both are not possible I would like to see a prop like "fillScrollbarGap" or something similar.

🌍 System information

Software Version(s)
Zag Version 1.26.4
Browser Chrome
Operating System Windows 11

📝 Additional information

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions