Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Layout shifting when using scrollbar-gutter: stable; #3251

Description

@tabarra

Bug report

Current Behavior

When some primitive like dialog or select is triggered, radix disables the page scrollbar, but that causes layout shift if the page uses scrollbar-gutter: stable;.

Expected behavior

Layout should not shift.

Reproducible example

Layout Shift Example

Suggested solution

Possibly using some css selector like *[style*="scrollbar-gutter: stable"]

Additional context

This is related to #1496 and #1925, but I decided to open a new issue because those don't seem to be focused on the stable gutter issue.

I also recorded a video, just in case anyone is having issues reproducing it.

firefox_bzEoCHEMF6.mp4

Your environment

Software Name(s) Version
Radix Package(s) @radix-ui/react-select 2.1.2
React n/a 17.0.1
Browser firefox 132.0.1
Assistive tech n/a
Node n/a
npm/yarn npm 10.8.1
Operating System Windows 10

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions