Q: How to solve Layout Shift?

[sessycode]

Browser-specific scrollbar behavior causing layout shifts with dropdown menus

Problem Description

I'm experiencing layout shifts when dropdown menus are opened/closed, but this issue appears to be browser-specific rather than a shadcn/ui problem. The issue occurs in Chromium-based browsers (Chrome, Edge) but works perfectly fine in Firefox.

When dropdown menus open in Chrome/Edge, the scrollbar disappears and the content area expands, causing noticeable layout shifts. This is particularly problematic for center-aligned layouts where the entire application width changes.

Browser Compatibility

• ✅ Firefox: No issues, scrollbar behavior is stable
• ❌ Chrome: Scrollbar disappears on dropdown open, causing layout shift
• ❌ Edge: Same issue as Chrome

Reproduce (Chrome)

1. When idle (no problem):

2. When dropdown appeared (problem):

Reproduction source: The issue can be easily reproduced by installing the sidebar-07 block from the official shadcn/ui blocks collection.

Attempted Solution and New Issue

I tried adding scrollbar-gutter: stable to the CSS, which prevents the layout shift by reserving space for the scrollbar. However, this creates a new problem:

When overlay components (like Sheet) are displayed, the reserved scrollbar area remains visible as a white strip, breaking the overlay's full-screen appearance.

Overlay trouble:

---

Question for the Community

Since this appears to be a Chromium browser behavior rather than a shadcn/ui issue, I'm wondering:

1. How are others handling this scrollbar layout shift problem in Chromium browsers?
2. Are there any CSS solutions that work well with overlay components?
3. Has anyone found a cross-browser solution that doesn't interfere with overlays?

Any advice or alternative approaches would be greatly appreciated!

Environment

• Framework: Next.js 15
• Components affected: Dropdown Menu, Sheet, and other overlay components
• Browsers: Chrome, Edge (Chromium-based)
• CSS attempted: scrollbar-gutter: stable

[sessycode]

It works for me as long as I don't use fixed position:

@layer base {

  html {
    --viewport-width: 100vw;
    --scrollbar-width: calc(100vw - 100%);
  }

  body {
    width: 100vw;
    overflow-x: hidden;
  }
}

[ShadmanSakib22]

Thanks this was the only solution that worked for me. Radix needs to update their select component to work with scroll gutter