scrollbar-gutter caussing issue in flyout modal

[devhoussam1998]

Flux version

2.11

Livewire version

4.0

Tailwind version

4.1.18

Browser and Operating System

Chrome on mac OS

What is the problem?

Using the flyout results in an empty scrollbar-gutter. The value is currently stable, but it should be auto instead.

Code snippets to replicate the problem

replace scrollbar-gutter: stable with scrollbar-gutter: auto in html tag.

Screenshots/ screen recordings of the problem

How do you expect it to work?

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[ganyicz]

This is a known limitation of scrollbar-gutter and dialog APIs.

The top-layer, in which the dialog lives, doesn't cover the scrollbar gutter area.

Flux adds the scrollbar gutter to avoid layout shift when locking scroll.

Previously, we used padding-right on the html tag to compensate for the scrollbar and avoid layout shift. The problem is that elements with position: fixed; right: X do not respect this padding and when scrolling is locked, they shift anyway.

The scrollbar-gutter avoids the issue with fixed positioning, however now causes the scrollbar gutter to be visible when a modal is opened. This is especially noticeable with flyouts, as they render near the edge of the browser window. However normal modals suffer from this as well:

The only possible solution is to stop using one or both of these APIs, which would re-introduce other bugs.