Page MenuHomePhabricator

Selecting text causes page to scroll up rapidly
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT

Description

When I am reading an article on the English Wikipedia, selecting any text close to the top of the screen will cause the article to scroll upwards rapidly.

The issue also seems to occur test2.wikipedia.org/wiki

Steps to replicate the issue (include links if applicable):

  • View an article
  • Scroll down slightly
  • Select text close to the top of the screen

What happens?:
The article will automatically scroll up rapidly until the top of the page is reached.

What should have happened instead?:
No automatic scrolling should occur, or the page should only slightly scroll up to display the selected text.

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):
Occurs on following browsers

Chrome Version 124.0.6367.92
Edge Version 124.0.2478.67
Firefox Version 125.0.3

Possible cause

What I think might be the problem here is a feedback loop happens when selecting text near the top of the screen.

  • The user selects text close to the top of the screen, which causes the article to scroll up slightly.
  • This means the cursor will select text close to the top of the screen again because it stays close to the top of the page.
  • This means the screen will move up slightly again to show the selected text, and the process repeats

Requirement

Selecting text near the top of a Wikipedia article on mobile should not trigger excessive automatic scrolling.

BDD

Feature: Prevent rapid scroll when selecting text near top of screen

Scenario: Selecting text near top of screen triggers scroll
  Given I am viewing an article on the mobile site
  And I have scrolled slightly down the page
  When I attempt to select text near the top of the viewport
  Then the page should not scroll rapidly to the top

Test Steps

Test Case 1: Selecting text near top does not trigger rapid scroll

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Apple_Inc. or https://test2.wikipedia.org/wiki
  2. Scroll slightly down the page (1–2 paragraphs)
  3. Tap and hold to begin selecting text near the top of the viewport
  4. Drag slightly to highlight
  5. AC1: No rapid automatic scrolling occurs to the top of the page

QA Results - Beta

ACStatusDetails
1T364023#10926789

Event Timeline

SToyofuku-WMF subscribed.

Can reproduce - not sure what's causing this, but the theory in the ticket seems plausible

ovasileva triaged this task as Medium priority.May 9 2024, 10:11 AM

Copying from the other task:

Apparently this is caused by the rule html { scroll-padding-top: 75px; }. That's intended to make links to sections work better when sticky header is active – e.g. if you click this link: https://en.wikipedia.org/wiki/The_Fighting_Temeraire#Symbolism, you'll see something like this, and not this. But it also apparently makes it so that moving your mouse cursor (while selecting text) into the top 75px of the page area (as opposed to above the page area) will start scrolling it, and 75px is a lot bigger than the actual sticky header (and Vector adds that rule even when the sticky header is not present).

Video for future reference:

(and Vector adds that rule even when the sticky header is not present)

I think this is a valid thing to be fixed. Otherwise, its kind of hard if this is coming from scroll padding

Change #1134312 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/skins/Vector@master] Remove sticky header enabled class when it is disabled

https://gerrit.wikimedia.org/r/1134312

Change #1134313 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/skins/Vector@master] Separate desired heading scroll offset from sticky header height

https://gerrit.wikimedia.org/r/1134313

Jdlrobson-WMF changed the task status from Open to In Progress.Apr 7 2025, 3:11 AM
Jdlrobson-WMF moved this task from Freezer to Q4 on the Web-Team board.
Jdlrobson-WMF subscribed.

Starting an estimation thread now.

Jdlrobson-WMF set the point value for this task to 2.May 19 2025, 5:44 PM
Jdlrobson-WMF moved this task from Q4 to Sprint Backlog on the Web-Team board.
Jdlrobson-WMF changed the task status from In Progress to Open.May 20 2025, 6:22 PM

Change #1134312 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Remove sticky header enabled class when it is disabled

https://gerrit.wikimedia.org/r/1134312

Releasing this for now. There is one remaining patch to review but there is a CI issue to figure out and I unfortunately won't have time to review before I wrap up.

Selecting text near the top of a Wikipedia article on mobile should not trigger excessive automatic scrolling.

This problem affects the desktop site, not mobile.

SToyofuku-WMF added a subscriber: LMora-WMF.

Jan to review as Loren's out today

Change #1134313 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Separate desired heading scroll offset from sticky header height

https://gerrit.wikimedia.org/r/1134313

Edtadros updated the task description. (Show Details)
Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sequoia 15.5
Browser: Chrome (latest as of test date)
Device: MS
Emulated Device: NA

Test Steps

Test Case 1: Selecting text near top does not trigger rapid scroll

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Apple_Inc. or https://test2.wikipedia.org/wiki
  2. Scroll slightly down the page (1–2 paragraphs)
  3. Tap and hold to begin selecting text near the top of the viewport
  4. Drag slightly to highlight
  5. AC1: No rapid automatic scrolling occurs to the top of the page

screenshot.mov.gif (838×1 px, 3 MB)

ovasileva claimed this task.