When I try to select and highlight code from examples the page will automatically scroll to the bottom.

[Alike73]

trafficstars

Prerequisites

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

Describe the issue

When I try to select and highlight code from examples on the site(https://getbootstrap.com/docs/5.3/components/modal/) the page will automatically scroll to the bottom.

Reduced test cases

N

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?

Currently v5.3.2

[Lucifer4255]

I tried to select the code from examples but nothing happened as such scrolling to the bottom of the page

[aglarms]

I had same issue on the following page. Some example on the same page do not cause issue.

https://getbootstrap.com/docs/5.3/customize/css-variables/ https://getbootstrap.com/docs/5.3/forms/input-group/ https://getbootstrap.com/docs/5.3/components/card/ https://getbootstrap.com/docs/5.3/components/collapse/ https://getbootstrap.com/docs/5.3/components/navbar/

OS: Windows11 Browser: Chrome, Edge

[settenop]

can reproduce on edge and chrome (windows 11), no issues on firefox, seems to only be happening on examples with an horizontal scrollbar

[julien-deramond]

Thanks for reporting this issue @Alike73 I managed to reproduce the issue on macOS (14.2.1) and Edge (Version 121.0.2277.83 (Official build) (arm64)). With the same OS, no problem with Chrome or Firefox.

[Rajuxz]

I am also facing this problem. I am using Windows 11 Developer edition and Brave browser. I am trying to copy the code by selecting the lines but page is automatically scroll down. Pages are: https://getbootstrap.com/docs/5.3/forms/validation/ https://getbootstrap.com/docs/5.3/forms/form-control/ https://getbootstrap.com/docs/5.3/forms/input-group/

[Yoda-BZH]

I also face this problem. Chrome 121.0.6167.85 on Debian Testing.

Doesn't happen on firefox-esr 115.7

can reproduce [...], seems to only be happening on examples with an horizontal scrollbar

yes, indeed

[abraxas86]

So glad it's not just me. I've lost track of the number of times I've gone to copy a single classname only to have the page fly down to the bottom.

Like those above me, in Win 10. Can replicate in Chrome and Edge, but not Firefox and only when selecting text from code sections with a horizontal scrollbar.

[julien-deramond]

Thank you, everyone, for confirming the various OS/browser combinations.

I successfully replicated the issue using this configuration. Interestingly, when I performed the same steps on the docs/5.2 version of the corresponding pages/sections, the problem did not occur. This leads me to believe that the issue is specific to modifications made in version 5.3.

To streamline communication and avoid unnecessary comments, could you kindly verify and confirm whether you observe the same behavior (NOK in v5.3 and OK in v5.2)? Please express your findings using the reactions (👍 or 👎) to this comment.

Once confirmed, I will proceed with identifying the commit responsible for this behavior in the commit history. Thanks in advance for your contributions and tests, very much appreciated!

[julien-deramond]

Thanks for the confirmation, good team effort :)

I think I've managed to find the commit introducing this behavior:

• git checkout 30e8d139fe0ba5d13692cd6e43ff734489ac4298 ; npm i ; npm run start 🟢
• git checkout d0fece932072872eb0e6aa688849f80465cfe6b6 ; npm i ; npm run start 🔴

I don't have time right now to find a solution but the idea would be to keep what's been introduced in https://github.com/twbs/bootstrap/commit/d0fece932072872eb0e6aa688849f80465cfe6b6 (the feature) and to fix the behavior you spotted. At least, we know where to look now!

[settenop]

there's a chromium issue regarding this bug now https://bugs.chromium.org/p/chromium/issues/detail?id=1522957&q=scroll-margin-top&can=2

[miniMAC]

ok guys, i've found the problem, and is a CSS problem related to scroll-margin-top

see: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top

[harrelchris]

I no longer observe this issue on Chrome Version 121.0.6167.185 (Official Build) (64-bit).

[ryanmortier]

I no longer observe this issue on Chrome Version 121.0.6167.185 (Official Build) (64-bit).

Seems fixed for me too on (arm64)

[julien-deramond]

If I understand well the threads from https://issues.chromium.org/issues/41495817 and https://bugs.chromium.org/p/chromium/issues/detail?id=1522957&q=scroll-margin-top&can=2, a fix has been provided for M122 and backported to M121. For Chrome, the issue seems to be resolved (thanks for the tests @ryanmortier and @harrelchris). For Microsoft Edge, the up-to-date version is still on my side 121.0.2277.112 (Official build) (arm64), and doesn't contain the patch. Let's keep this issue open and see if the fix is well-propagated everywhere. I'd say we wouldn't have anything to do on our side then.

[yesitisme]

Fixed for me on edge Version 121.0.2277.128 (Official build) (64-bit) I think this Issue can be closed

[louismaximepiton]

According to https://chromium.googlesource.com/chromium/src.git/+log/refs/branch-heads/6167, it seems that it should be resolved updating to latest version of Chrome (or at least 121.0.6167.175). I guess it has been backported to each Chromium based browser. I tested for Chrome and Chromium based browsers for versions 120, 121 and 122 on Windows and MacOS and it seems like the latest versions and all fine. I'm closing this issue. So if you still have this issue, please update your browser.