MacOS - Safari - Show scroll bars always - Word wrap

[mathieu-lessard]

Provide a general summary of the issue here

If you:

• Use MacOS
• Use General > Appearance > Show scroll bars: Always
• Use Safari
• Have a menu with a scrollbar
• All the items in the menu are of similar length

Most items in the menu will word wrap.

🤔 Expected Behavior?

Menu's items shouldn't look drastically different when scrolling vs scrollbar always showing.

😯 Current Behavior

Setting:

Menu in Safari:

Menu in Safari with "When scrolling" setting:

Menu in Chrome with "Always" setting:

💁 Possible Solution

If it's detectable that the user is on MacOS, Safari, and has Show scroll bars always, increase the width by the extra pixels required for the different scrollbar.

🔦 Context

No response

🖥️ Steps to Reproduce

1. Be on Mac.
2. Go to System Preferences > General > Appearance > Show scroll bars. Select "Always".
3. Open Safari.
4. Go to: https://codesandbox.io/p/sandbox/spectrum-safari-scroll-bar-issue-9g9j5y?file=%2Fsrc%2FApp.js%3A21%2C37
5. Ensure the window is small enough that a scrollbar will appear.
6. Open the "Same Length" menu.

Version

3.35.0

What browsers are you seeing the problem on?

Safari

If other, please specify.

No response

What operating system are you using?

macOS Monterey

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Confirmed I can see it in Safari, not in Chrome

[maximpostnikov]

This is not an issue with react-aria; macOS has two modes. In Windows, the scrollbar will always be visible. You need to account for this when determining the width of the menu in your selector. Either use a custom hook to detect whether the scrollbar takes up space and adjust for it via CSS, or use a JS scrollbar that is positioned absolutely.