Doc: Extra top padding after having clicked on anchor links

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

An extra padding top is created for each section after having clicked on the anchor links in the documentation.

Basic rendering

Rendering after the manipulation (with the extra top padding)

I haven't looked at the issue precisely but this is probably related from near and far to:

.bd-content>:target {
 padding-top:5rem;
 margin-top:-5rem
}

It has changed in https://github.com/twbs/bootstrap/commit/195440f2fb1e94c014a9cf08f3eae40f3d224620.

Nothing has been tested yet on my side but there was another system in place before apparently based on:

// Offset for the sticky header
@include media-breakpoint-up(md) {
  :root {
    scroll-padding-top: 4rem;

Note: It happens with all breakpoints.

Reduced test cases

1st test case

After having clicked on "Importing", the padding-top stays on top until the page is refreshed.

2nd test case

It is maybe more obvious in this video. We can directly see the extra padding on top of "CSPs and embedded SVGs" that's added even if the content is not near the header.

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

Linux

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

Firefox

What version of Bootstrap are you using?

v5.2.0 (current main branch)