[Bug]: Page jumps with `scrollbar-gutter: stable` after opening DropdownMenu.

[jelleroorda]

Environment

Development/Production OS: MacOS 15.6 (24G84)
Node version: v22.16.0
Package manager: npm@10.9.2
Reka UI version: 2.6.0
Vue version: vue@3.5.24
Nuxt version: -
Nuxt mode: -
Nuxt target: -
CSS framework: tailwindcss@4.1.17
Client OS: MacOS 15.6 (24G84)
Browsers: 
- Librewolf 126.0-2
- Vivaldi 7.6.3797.63 (Stable channel) (arm64)
- Safari Version 18.6 (20621.3.11.11.3)

Link to minimal reproduction

https://stackblitz.com/edit/p1ikpz27-bbcfnvxa?file=index.html

Steps to reproduce

1. Add style="scrollbar-gutter: stable" to the html tag.
2. Open any dropdown.

Describe the bug

Whenever you open the dropdown, the entire page jumps to the left. This probably has to do with the compensation for the scrollbar that would disappear if the page were scrollable. The following Stackblitz shows the issue quite clearly, because of the green background.

Note:

• The scrollbar-gutter: stable ensures that the browser takes for the scrollbar, even if the content is not scrollable. This can be used to prevent jumpy page experiences on SPA applications were some pages are scrollable, and other are not.
• When opening the dropdown menu the page jumps to the left. A padding-right: 15px; is being added to the body tag. This is now on top of the reserved scrollbar space.
• When you remove the scrollbar-gutter: stable it works perfectly smooth like expected.

In case the Stackblitz is not available anymore, it's literally a Stackblitz fork from https://reka-ui.com/docs/components/dropdown-menu#dropdownmenu, with the only difference style=""scrollbar-gutter: stable;"`` on the html tag in index.html`

Expected behavior

I would not expect the page to jump to the left.

Context & Screenshots (if applicable)

See the following example based on the dropdown from the documentation:

Screen.Recording.2025-11-07.at.18.12.37.mov

[kricsleo]

I can't reproduce it in the example you provided (with scrollbar-gutter: stable). Did I miss anything?

[jelleroorda]

Hello Kricsleo, No, that’s literally the only change I’ve made to the example. Are you perhaps on another OS than Mac? Perhaps this is a Mac only issue On 8 Nov 2025, at 13:38, Kricsleo ***@***.***> wrote:  [https://avatars.githubusercontent.com/u/32707098?s=20&v=4]kricsleo left a comment (unovue/reka-ui#2270)<#2270 (comment)> I can't reproduce it in the example you provided (with scrollbar-gutter: stable). Did I miss anything? — Reply to this email directly, view it on GitHub<#2270 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ACGERVVE7VT3HRVUSKSG3YD33XP3FAVCNFSM6AAAAACLO4N4XCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTKMBWGUYDOOJTGE>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[kricsleo]

I'm on Mac (15.5 (24F74)) with Chrome (v141.0.7390.123 (Official Build) (arm64)). That's what I got, no scrolling happened.

Screen.Recording.2025-11-09.at.12.41.58.PM.mov

[sadeghbarati]

You should use ConfigProvider from reka-ui in your layout or main Vue file
and set scrollBody prop to false since you handling it natively with the scrollbar-gutter: stable CSS

• https://reka-ui.com/docs/utilities/config-provider

[jelleroorda]

Thanks @sadeghbarati, that works! I missed that part in the docs.