MacOS - Safari - Show scroll bars always - Word wrap
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### 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_
Contributor guide
Assessment
This issue has not been assessed yet.