No visible cue on Mac that dropdown has hidden scrollable items, affecting downloads page et al

[shadowspawn]

URL:

https://nodejs.org/en/download

Browser Name:

Safari

Browser Version:

Version 18.3 (20620.2.4.11.5)

Operating System:

macOS Sequoia v15.3

How to reproduce the issue:

what I did:

• go to downloads page
• click on dropdown box for "using" to see available approaches

what I expected to happen: show the available approaches

what I actually got: only some of the approaches visible, and no cue more are available. The number visible is relatively small taking up a small part of the available screen. I spent some time thinking the website was broken until I tried on Windows, where the scrollbar is visible so there is a cue that can scroll. In particular, the two hidden approaches are Devbox and Chocolatey.

Reproduced in Chrome as well as Safari.

I saw the same issue on the docs page in the Other versions dropdown, with no cue that more versions available if scroll. (In that case at least quite a few were shown.)

I looked into the underlying technology for interest. All new to me, so not sure of pros and cons!

I see that the Radix Select documentation says about the custom scrollbar

The native scrollbar is hidden by default as we recommend using the ScrollUpButton and ScrollDownButton parts for the best UX.

In the example dropdown at the top of the Radix Select page, the ScrollUpButton and ScrollDownButton parts are included in the UX. In this screenshot the down chevron is visible:

[ovflowd]

This unfortunately is more of a macOS issue than our issue. macOS by default hides the scrollbars and most of the website I know don't have extra cues simply because the scrollbar itself should be enough. So I'm not really sure what we can do here besides using a custom scrollbar.

I assume that would be the desired approach here?

[shadowspawn]

The Radix Select documentation suggests using ScrollUpButton and ScrollDownButton, rather than a custom scrollbar. (That wasn't clear from my quote, sorry.)

I suggest evaluating that approach.

The sample control at the top of the page has the buttons around the viewport:

   <Select.ScrollUpButton className="SelectScrollButton">
      <ChevronUpIcon />
   </Select.ScrollUpButton>
   <Select.Viewport...
      ...
   </Select.Viewport>
   <Select.ScrollDownButton className="SelectScrollButton">
      <ChevronDownIcon />
   </Select.ScrollDownButton>

[shadowspawn]

(Full disclosure @ovflowd: I have a vested interest in this issue. I stumbled over this problem while working on adding a new download method for Node.js using n and n-install, and it took me some time to work out why my new method was not appearing. Now I am back on track and refining the steps.)

[ovflowd]

(Full disclosure @ovflowd: I have a vested interest in this issue. I stumbled over this problem while working on adding a new download method for Node.js using n and n-install, and it took me some time to work out why my new method was not appearing. Now I am back on track and refining the steps.)

Oh I see! Feel free to tackle this issue if you want ❤