Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Opening a modal with scrollbar-gutter: stable shifts the page content and shows white (non grey-overlayed) gutters #40659

Open
3 tasks done
delthas opened this issue Jul 24, 2024 · 1 comment · May be fixed by #40789
Open
3 tasks done

Opening a modal with scrollbar-gutter: stable shifts the page content and shows white (non grey-overlayed) gutters #40659

delthas opened this issue Jul 24, 2024 · 1 comment · May be fixed by #40789
Labels
css

Comments

@delthas
Copy link

delthas commented Jul 24, 2024 •
edited
Loading

Prerequisites

Describe the issue

When using scrollbar-gutter: stable (I use it on my root element), when I open a modal, the page contents shift slightly, and the gutter is shown as plain white instead of the expected gray overlay.

Reduced test cases

I couldn't make the example work in CodePen, but here's a minimum reproducer:

<!doctype html>
<html lang="en" data-bs-theme="auto" style="scrollbar-gutter: stable both-edges">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title</title>
  <link href="/static/css/bootstrap.css" rel="stylesheet">
</head>
<body>

<main>
  <div class="container">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal">
      Open dialog
    </button>
    <div class="modal fade" id="modal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            Hi!
          </div>
        </div>
      </div>
    </div>
  </div>

</main>
<script src="/static/js/bootstrap.bundle.js"></script>

</body>
</html>

Before clicking the dialog:

firefox_2024-07-24_03-02-51

After clicking the dialog:

firefox_2024-07-24_03-03-18

I made a screenshot of the whole viewport, at the exact same place. We can clearly see from one image to the next, that the button shifted slightly to the left when the dialog was opened. Also there are some white gutters after the dialog is opened.

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

v5.3
@petrhank
Copy link

When i tried adding scrollbar-gutter: stable both-edges to root element of Bootstrap documentation, two things happen. The backdrop of modal is not taking the whole the whole screen and whole page shifts slightly to the left (caused probably by additional right padding added by bootstrap?). See the video attached

Video.mp4

@ac-mmi ac-mmi mentioned this issue Aug 15, 2024
Closed
@ac-mmi ac-mmi linked a pull request Sep 3, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css
Projects
None yet
Milestone
No milestone
3 participants
@delthas @julien-deramond @petrhank