adobe / adobe/react-spectrum

MacOS - Safari - Show scroll bars always - Word wrap

Open
#6,428 2 comments 1 reaction 0 assignees View on GitHub
enhancement
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:
![image](https://github.com/adobe/react-spectrum/assets/2773112/1644f276-fc3d-45fa-a0ef-4197c4a003f0)

Menu in Safari:
![screenshot_640](https://github.com/adobe/react-spectrum/assets/2773112/e8a93b69-e3d0-49d8-9cc6-6fbb480e7681)

Menu in Safari with "When scrolling" setting:
![screenshot_641](https://github.com/adobe/react-spectrum/assets/2773112/982cf75b-24a4-41e1-a8ae-2c93805e1fe2)

Menu in Chrome with "Always" setting:
![image](https://github.com/adobe/react-spectrum/assets/2773112/55ed4c2f-362d-4688-bef8-c7953c67ab22)

### 💁 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.