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

x/website: Content scrolls up when text is selected #52917

Open
a3y3 opened this issue May 15, 2022 · 17 comments
Open

x/website: Content scrolls up when text is selected #52917

a3y3 opened this issue May 15, 2022 · 17 comments
Labels
WaitingForInfo website
Milestone

Comments

@a3y3
Copy link

@a3y3 a3y3 commented May 15, 2022

What is the URL of the page with the issue?

Every page on go doc, but I'll refer to https://go.dev/doc/tutorial/workspaces in the examples below.

What is your user agent?

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36

Screenshot

image

What did you do?

  • Scrolled down the page a bit.
  • Selected any part of the top text. For example, in the above screenshot: "The use directive tells Go that the module …" using double click.

What did you expect to see?

The text should get selected/highlighted.

What did you see instead?

The page scrolls up quickly, creating a very uncomfortable user experience.

@gopherbot gopherbot added this to the Unreleased milestone May 15, 2022
@ZekeLu
Copy link

@ZekeLu ZekeLu commented May 16, 2022

I can not reproduce this issue. It looks like there is an extension which changes the behavior of the double click. Can you disable all the extensions and try again?

@seankhliao seankhliao added the WaitingForInfo label May 16, 2022
@a3y3
Copy link
Author

@a3y3 a3y3 commented May 17, 2022

I disabled all the extensions but I can still see the issue. I could even reproduce it on Firefox and Chrome across several Windows versions using browserling.

Here's a gif that shows the bug: https://imgur.com/a/76BN8iG

@ZekeLu
Copy link

@ZekeLu ZekeLu commented May 17, 2022

Thank you for providing the information. Since you observed the same behavior across different browsers, I guess that the scroll event (or other events that causes the page to scroll up) is emitted by your system. Maybe the mouse is broken, maybe there is an application capturing the double click events and emitting other events.

Can you try two more things to confirm the root cause of the issue?

  1. Try to double click pages from other websites, will the pages scroll up?
  2. Try to double click https://go.dev/doc/tutorial/workspaces on another computer, will the page scroll up?

If you know how to use Spy++, you can use it to check what messages are emitted. It's shipped with Visual Studio. If you don't want to install Visual Studio, you can download it from https://github.com/westoncampbell/SpyPlusPlus. Here is my message options:

1
2

And here is the messages captured on my computer:

3

@a3y3
Copy link
Author

@a3y3 a3y3 commented May 17, 2022

Looks like this doesn't happen if you use a mouse. It only happens if you use laptop touchpads (I verified this on 2 separate laptops, both on Windows), and to a certain extent, touch devices. I could reproduce this issue on an iPhone 13 as well, on both Chrome and Safari.

@ZekeLu
Copy link

@ZekeLu ZekeLu commented May 18, 2022

OK, I have managed to reproduce the described behavior.

  • touchpad on desktop: click->tap->move up
  • mobile phone: long tap->move up.

If this is your case, then I think the behavior is expected and there is nothing wrong.

@a3y3
Copy link
Author

@a3y3 a3y3 commented May 18, 2022

I'm not sure how this is expected behavior. Double tap on a touchpad should select the text, not scroll it up automatically.

The Go docs website is the only website where this happens. All other websites select text when double tapped with a touchpad.

@ZekeLu
Copy link

@ZekeLu ZekeLu commented May 18, 2022

If you move your finger unintentionally on the second tap, the double tap will be recognized as click->tap->move by the system. Can you confirm whether this is your case first?

@a3y3
Copy link
Author

@a3y3 a3y3 commented May 19, 2022

Nope. The issue happens without moving your finger at all, with a simple double tap on a word.

@ZekeLu
Copy link

@ZekeLu ZekeLu commented May 19, 2022

Can you use Spy++ to capture the messages as suggested in #52917 (comment)?

@a3y3
Copy link
Author

@a3y3 a3y3 commented May 19, 2022

I could use it if you really wanted me to, but I don't think this is a problem of my system or my mouse emitting random events. I discussed this with my friend (who could reproduce this issue too, btw, on a completely different computer) and it seems this is a widespread chrome issue, actually. It affects all websites, just to a far lesser extent than it affects the golang documentation website. Also, even with using a touchpad, it should be a "double-tap", not a "double-press", if that makes sense.

To reproduce it on other websites, if you double tap to select a word and the word is almost (but not completely) out of the screen, Chrome will scroll up in the same weird manner. For example, double tapping any of these "half" words will reproduce this issue on Wikipedia.
image

Now, I don't know why it affects the Go website more than the other websites. Double tapping any of these words will reproduce the issue:
image

It probably has to do something with the line-height of the body, I think. I increased the line-height on body to 10 and I could reproduce the issue when the words were far below the screen too.

@ZekeLu
Copy link

@ZekeLu ZekeLu commented May 20, 2022

Since this issue is not specific to the golang documentation website, and it's more like a browser, system or hardware issue, maybe we should avoid discussing it here so that we won't make too many noises.

I still incline to the guess that the behavior is a "select and drag outside of the viewport". If you still want to diagnose this issue, please find me on slack. And if we find something, we can report back here.

Thank you!

@a3y3
Copy link
Author

@a3y3 a3y3 commented May 24, 2022

How do I find you on slack?

@looshch
Copy link
Contributor

@looshch looshch commented May 27, 2022

@a3y3 is right, I can reproduce this as well. @ZekeLu please make sure to position the text exactly as on the GIF. The problem is in _content/css/styles.css on line 250 scroll-padding-top: 4.6875rem. Disabling this rule solves the issue

@looshch
Copy link
Contributor

@looshch looshch commented May 27, 2022

I can create a CL for this, but I asked the original author of this line about his intent. It was almost 2 years ago, probably he won’t recall the reason behind the line, but let’s wait and see

@ZekeLu
Copy link

@ZekeLu ZekeLu commented May 27, 2022

@looshch Excellent!

I don't have a touchpad right now. But when I set scroll-padding-top to a big value (for example, 100rem), select the text near the top of the veiwport, and move my mouse at a very little distance, it scrolls to the top of the page very fast. When I set it to 0 and do the same thing, it just scrolls up a little. So obviously, scroll-padding-top: 4.6875rem will cause trouble on touchpad more easily (I can not reproduce it on touchpad before because I have the habit to touch the touchpad carefully 😃 ).

The value is set in this commit: golang/website@5571d04. But there is not information about why it's set. I think it's safe to remove it.

Update
When scroll-padding-top is set to 100rem, selecting the text near the top of the veiwport with a mouse will make the page scroll up. But double click the mouse to select text won't make it scroll up.

@gopherbot
Copy link

@gopherbot gopherbot commented May 27, 2022

Change https://go.dev/cl/409014 mentions this issue: _content/css: fix content auto-scrolling on selection

@a3y3
Copy link
Author

@a3y3 a3y3 commented Jun 16, 2022

I’m glad it could be reproduced! As you can imagine, it can get annoying because some people like to read by double tapping on text and selecting it as they read along - and that’s not possible because of the scrolling issue.

I do wonder why the content scrolls up only on touchpad and not a mouse, though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
WaitingForInfo website
Projects
None yet
Development

No branches or pull requests

5 participants