Page MenuHomePhabricator

Use thin scroll bar in TOC sidebar
Open, LowestPublicFeature

Description

In the new design of the English Wikipedia, the table of contents sidebar has a regular scroll bar. This scroll bar can be made thinner via the CSS scrollbar-width: thin declaration (supported in Firefox).

Before/after screenshot comparison: https://i.imgur.com/XD3LwsB.png

Event Timeline

Aklapper changed the task status from Open to Stalled.Aug 10 2022, 5:18 AM

Hi @Simevidas, thanks for taking the time to report this! How and where to see what is in the screenshot? Where does that dropdown come from, where does that box on top of text come from? Which browser is this? Does this also happen in safemode? Please provide a list of steps to reproduce.

I'll add a screenshot for comparison:

Screenshot from 2022-08-10 07-16-40.png (818×1 px, 285 KB)

Steps to reproduce:

  1. On the page shown in your screenshot, click the “Software” link in the Contents sidebar.
  2. While the mouse cursor is over the sidebar, scroll it.

You should see a scroll bar on the sidebar.

I do, and it's thin in Firefox 103.0.1:

Screenshot from 2022-08-10 07-33-59.png (867×786 px, 182 KB)

Please see all my other questions - thanks.

I tested on both macOS 12.5 and Windows 10. In both cases, the scroll bar has a regular size. It is not thin.

macOS:

Screenshot 2022-08-10 at 07.57.28.png (1×2 px, 913 KB)

Windows:

IMG_0556.WEBP (340×640 px, 64 KB)

Aklapper changed the task status from Stalled to Open.Aug 10 2022, 6:04 AM
Jdlrobson triaged this task as Lowest priority.EditedAug 11 2022, 6:01 PM
Jdlrobson added subscribers: bwang, Jdrewniak, Jdlrobson.

I'm not sure about this. It seems like a problem for accessibility.
From https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
"Use this property with caution — setting scrollbar-width to thin or none can make content hard or impossible to scroll if the author does not provide an alternative scrolling mechanism. While swiping gestures or mouse wheels can enable scrolling on such content, some devices have no scroll alternative."

I'd advise using user CSS to work around this in the meantime.