[BUG] Modal backdrop does not cover scrollbar gutter when usePreventScroll is active

Author: aosmcleodCreated May 23, 2026Updated May 23, 2026

HeroUI Version

v3 (latest canary)

Describe the bug

When a Modal opens, React Aria's usePreventScroll sets scrollbar-gutter: stable on <html> to prevent layout shift. The modal backdrop uses w-full (resolves to width: 100%), which on a position: fixed element resolves against the viewport's content area — excluding the scrollbar gutter. This leaves a visible strip at the right edge of the viewport where the backdrop doesn't cover.

Root cause

width: 100% on a fixed element resolves against the containing block (the viewport minus the gutter). width: 100vw resolves against the full viewport including the gutter.

Proposed fix

Replace w-full with explicit CSS on .modal__backdrop:

css

.modal__backdrop {
  width: 100vw;
  max-width: 100%;
}

100vw covers the full viewport including the scrollbar gutter
max-width: 100% prevents overflow when the modal is rendered inside a scoped portal container (UNSTABLE_portalContainer) that is narrower than the viewport

This is a one-line CSS change with no API or behavioural impact.

Steps to Reproduce the Bug or Issue

Open a page with enough content to produce a scrollbar
Open a Modal
Observe the right edge of the backdrop — a thin strip of the page content is visible where the scrollbar gutter sits

Expected behavior

The backdrop should cover the entire viewport, including the scrollbar gutter area.

Operating System Version

macOS (all platforms affected)

Browser

Chrome, Firefox, Safari (all affected — the gutter behaviour is standard)

Source: heroui-inc/heroui

View original on GitHub View discussion on GitHub