Modal and offcanvas page content jumping vertically

[zigazuzek]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Page content is jumping vertically when using Boostrap 5 offcanvas and modal components.

Please watch the video to see the issue in question: https://app.screencastify.com/v3/watch/eEgOFiBe7LaCQA7la1eg

This happens:

• with browsers having a non floating scrollbar (like Chrome and Edge)
• when the container width is 100% and the scrollbar is touching the content (usually a smaller browser size)

Any potential fix or a workaround would be welcome. I can think of two workarounds so far, but that doesn't fix the core of the problem:

• enabling scrolling on modals and offcanvas
• using multiple container widths, so just .container instead of .container-xxl for example

Reduced test cases

You can test it in the Boostrap docs https://getbootstrap.com/docs/5.3/components/modal/#how-it-works

Make sure to test it with a smaller browser window, so the container is 100%.

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

Windows, macOS

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

Chrome, Microsoft Edge

What version of Bootstrap are you using?

v5.3.3

[marwenbenhajhassine]

A common approach is to add some custom CSS that prevents the body from shifting when the modal or offcanvas component is opened

[zigazuzek]

A common approach is to add some custom CSS that prevents the body from shifting when the modal or offcanvas component is opened

Hi, everything I've tried so far didn't fix the issue. Did you have any particular CSS fix in mind?

[nikischin]

I am experiencing the same issue just one year later. I wasn't able to further isolate the issue, but it only happens for the bottom offcanvas for me. Your video unfortunately is not available anymore.

[mdo]

Fixed by #42545