[offcanvas] - triggers unexpected scroll to top when scroll-padding-top is set on html, body

[webexpr-dhenriet]

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

When using an offcanvas component, closing it (either via the close button or by clicking on the backdrop) unexpectedly scrolls the page to the top — but only when the following CSS rule is applied:

html, body {
  scroll-padding-top: 100px;
}

This seems to be a Chromium-specific issue.

To Reproduce
Steps to reproduce the behavior:

1. Add scroll-padding-top: 100px; to html, body
2. Add an offcanvas with a toggle and a close button
3. Scroll the page down
4. Open the offcanvas
5. Click on the close button or the backdrop to dismiss it
6. Observe the page jumps back to the top

Expected behavior
The page scroll position should not change when closing an offcanvas, regardless of scroll-padding-top.

Environment

• Bootstrap version: 5.3.7, 5.3.2
• Browser:
  • ✅ Firefox: Works correctly, no scroll jump
  • ❌ Chrome (v125+) and Edge (v125+): Scrolls to top when closing offcanvas
• OS: Windows

Removing scroll-padding-top fixes the issue: the scroll position remains unchanged after closing the offcanvas.

Reduced test cases

Codepen => https://codepen.io/David-Henriet/pen/GgpqLrm

bt-offcanvas-ezgif.com-gif-maker.webm

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

Windows

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

Chrome

What version of Bootstrap are you using?

5.3.7, 5.3.2

[crftwrk]

I had the same problem. Solved it by using margin instead padding and added to the [id] selector instead to the html:

[id] {
  scroll-margin-top: 100px;
}

[webexpr-dhenriet]

@crftwrk Thanks for your feedback. Your solution works (I know it), but it's manual. I want something automatic, so I can't apply the scroll margin, which is why I used padding.
In the context of sites with a back office with manageable content, so I can't use an id selector. The idea is that the client can link to a section or page with an anchor and scroll with the correct offset (relative to the sticky header) without having to add CSS, which is why I want to apply this to .

After that, it's not critical that there is a small scroll when closing an offcanvas. I wanted to know if this is a native problem or related to JS bootstrap. Maybe with future versions of Chromium this will be fixed ! On Firefox this problem does not appear.

[mdo]

Fixed by #42544