Doc: Extra top padding after having clicked on anchor links

[julien-deramond]

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 195440f.

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)

[Catalyst497]

I think I am have found a solution to this.
Please assign it to me.

[julien-deramond]

Hey @Catalyst497 . We don't affect issues but you can create a PR to provide a solution :)

[mdo]

The problem with the previous implementation using scroll padding was that it moved our scroll on click of any dropdown element, and possibly other elements. Either that's a problem in our JS or it's a bug in Safari with the property. This solution, while annoying in some ways, has worked best for us historically so far.