Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
3 tasks done
Alike73 opened this issue Jan 24, 2024 · 16 comments

Comments

@Alike73
Copy link

Alike73 commented Jan 24, 2024

Prerequisites

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
Copy link

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

@aglarms
Copy link

aglarms commented Jan 29, 2024

@settenop
Copy link

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
Copy link
Member

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
Copy link

Rajuxz commented Jan 30, 2024

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
Copy link

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
Copy link

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
Copy link
Member

julien-deramond commented Jan 31, 2024

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
Copy link
Member

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 d0fece9 (the feature) and to fix the behavior you spotted.
At least, we know where to look now!

@settenop
Copy link

settenop commented Feb 1, 2024

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
Copy link

miniMAC commented Feb 10, 2024

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

Screenshot 2024-02-10 alle 08 15 45

@harrelchris
Copy link

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

@ryanmortier
Copy link
Contributor

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
Copy link
Member

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
Copy link

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

@louismaximepiton
Copy link
Member

louismaximepiton commented Feb 28, 2024

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.

@louismaximepiton louismaximepiton closed this as not planned Won't fix, can't repro, duplicate, stale Feb 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests