Page MenuHomePhabricator
Create Task
Maniphest T311436

TOC scrollbar should be on top of bottom fade (Chrome & Safari)
Closed, ResolvedPublic
Actions

Assigned To
ovasileva
Authored By
• alexhollender_WMF
Jun 27 2022, 4:43 PM
Tags
Referenced Files
F35374563: Screen Shot 2022-08-01 at 2.41.56 PM.png
Aug 1 2022, 12:42 PM
F35371721: Screen Recording 2022-07-31 at 1.49.37 PM.mov.gif
Jul 31 2022, 8:50 PM
F35371719: Screen Recording 2022-07-31 at 1.44.02 PM.mov.gif
Jul 31 2022, 8:50 PM
F35371659: Screen Recording 2022-07-31 at 1.41.57 PM.mov.gif
Jul 31 2022, 8:50 PM
F35317597: Screen Recording 2022-07-14 at 7.00.03 PM.mov.gif
Jul 15 2022, 2:01 AM
F35317599: Screen Recording 2022-07-14 at 7.00.47 PM.mov.gif
Jul 15 2022, 2:01 AM
F35317591: Screen Recording 2022-07-14 at 6.56.21 PM.mov.gif
Jul 15 2022, 2:01 AM
F35312276: Screen Shot 2022-07-08 at 12.49.13 PM.png
Jul 8 2022, 6:49 PM
View All 13 Files
Subscribers
Aklapper
• alexhollender_WMF
bwang
cjming
Edtadros
Jdlrobson
ovasileva

Description

Description

In Chrome and Safari the scroll bar in the TOC fades as it reaches the bottom (Firefox does not).

ChromeFirefoxSafari
Screen Recording 2022-06-17 at 4.14.41 PM.mov.gif (658×270 px, 412 KB)
Screen Recording 2022-06-17 at 4.15.24 PM.mov.gif (658×270 px, 387 KB)
Screen Recording 2022-06-17 at 4.12.35 PM.mov.gif (658×270 px, 246 KB)

Chrome example:

Screen Shot 2022-06-27 at 1.45.01 PM.png (591×624 px, 172 KB)

Developer notes

Setting right of the fade a bit bigger so as not to affect scrollbar seems to fix it - patch attached

QA steps

Screen Shot 2022-07-08 at 12.49.13 PM.png (1×1 px, 402 KB)

QA Results - Beta

ACStatusDetails
1✅T311436#8080080

QA Results - Prod

ACStatusDetails
1✅T311436#8118132

Details

SubjectRepoBranchLines +/-
TOC scrollbar should not fademediawiki/skins/Vectormaster+11 -15
Customize query in gerrit

Related Objects
Search...

Event Timeline

• alexhollender_WMF created this task.Jun 27 2022, 4:43 PM
• alexhollender_WMF mentioned this in T310540: Table of contents should show scrollbar when scrolling.
ovasileva added a comment.Jun 28 2022, 9:44 AM
This comment was removed by ovasileva.
ovasileva triaged this task as Medium priority.Jun 28 2022, 9:48 AM
ovasileva updated the task description. (Show Details)
ovasileva added a parent task: T273473: [Epic] Improve the table of contents.Jun 28 2022, 2:47 PM
cjming claimed this task.Jun 29 2022, 3:16 PM
ovasileva raised the priority of this task from Medium to High.Jun 30 2022, 8:21 AM
gerritbot added a comment.Jun 30 2022, 10:34 PM

Change 810119 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] TOC scrollbar should not fade

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

gerritbot added a project: Patch-For-Review.Jun 30 2022, 10:34 PM
cjming removed cjming as the assignee of this task.Jun 30 2022, 10:46 PM
cjming updated the task description. (Show Details)
cjming moved this task from Needs Analysis to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
cjming moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
cjming subscribed.
LGoto edited projects, added Web-Team-Backlog (Kanbanana-2022-23-Q1); removed Web-Team-Backlog (Kanbanana-FY-2021-22).Jul 5 2022, 5:52 PM
LGoto moved this task from Needs Analysis to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.
bwang claimed this task.Jul 5 2022, 9:29 PM
Jdlrobson moved this task from Incoming to Table of Contents on the Desktop Improvements (Vector 2022) board.Jul 6 2022, 4:02 PM
cjming claimed this task.Jul 6 2022, 4:37 PM
cjming moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.
cjming added a subscriber: bwang.
bwang moved this task from Needs More Work to QA on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Jul 8 2022, 6:18 PM
gerritbot added a comment.Jul 8 2022, 6:39 PM

Change 810119 merged by jenkins-bot:

[mediawiki/skins/Vector@master] TOC scrollbar should not fade

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

cjming reassigned this task from cjming to Edtadros.Jul 8 2022, 6:49 PM
cjming updated the task description. (Show Details)
cjming updated the task description. (Show Details)
Maintenance_bot removed a project: Patch-For-Review.Jul 8 2022, 7:31 PM
ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.21; 2022-07-18).Jul 12 2022, 6:02 AM
Edtadros moved this task from QA to QA in Prod on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Jul 15 2022, 2:01 AM

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Navigate to a page on beta cluster that has a long TOC i.e. https://en.wikipedia.beta.wmflabs.org/wiki/Barack_Obama
Open up some sections to invoke the scrollbar
Scroll down to bottom of TOC and note that the scrollbar does not fade
✅ AC1: Test on affected browsers

ChromeFirefoxSafari
Screen Recording 2022-07-14 at 6.56.21 PM.mov.gif (1×540 px, 1 MB)
Screen Recording 2022-07-14 at 7.00.47 PM.mov.gif (1×540 px, 664 KB)
Screen Recording 2022-07-14 at 7.00.03 PM.mov.gif (1×540 px, 949 KB)
Edtadros reassigned this task from Edtadros to ovasileva.Jul 31 2022, 8:50 PM
Edtadros moved this task from QA in Prod to Ready for Signoff on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Navigate to a page on beta cluster that has a long TOC i.e. https://en.wikipedia.beta.wmflabs.org/wiki/Barack_Obama
Open up some sections to invoke the scrollbar
Scroll down to bottom of TOC and note that the scrollbar does not fade
✅ AC1: Test on affected browsers

ChromeFirefoxSafari
Screen Recording 2022-07-31 at 1.41.57 PM.mov.gif (876×562 px, 617 KB)
Screen Recording 2022-07-31 at 1.44.02 PM.mov.gif (876×562 px, 635 KB)
Screen Recording 2022-07-31 at 1.49.37 PM.mov.gif (876×562 px, 1 MB)
Edtadros updated the task description. (Show Details)Jul 31 2022, 8:52 PM
ovasileva added a comment.EditedAug 1 2022, 12:42 PM

This is what I'm seeing in production right now (Chrome 103, safemode on) - sidebar does not fade and top of sidebar looks cut off

Screen Shot 2022-08-01 at 2.41.56 PM.png (1×1 px, 721 KB)

ovasileva moved this task from Ready for Signoff to Needs More Work on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Aug 1 2022, 12:43 PM
ovasileva moved this task from Needs More Work to Ready for Signoff on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Aug 1 2022, 5:46 PM

@alexhollender_WMF to create spike to look into improving the scrolling behavior

ovasileva closed this task as Resolved.Aug 16 2022, 7:33 AM

Follow-up in T315280: [Visual refinements] Improve scrolling behavior for ToC. Resolving this one.

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL