adobe / adobe/spectrum-web-components
[Bug][Action Menu]: Safari - menu height in short view port is not consistent
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 262
- Avg merge
- 3d 10h
- Merged PRs (30d)
- 68
Description
### Note: Let's make sure this is fixed/accounted for in Gen2
### Impacted component(s)
sp-action-menu
### Library version
1.9.0
### Expected behavior
`sp-action-menu` with many `sp-menu-items` rendered in an `overlay` should render consistently.
### Actual behavior
#### Safari
1. in Safari, adjust browser to be a shorter height
1. click `Toggle Dialog`
1. open the action menu, the menu will render fine with overflow in scroll
1. open the action menu again, the menu now renders outside the viewport
1. opening the menu should be render consistently
#### Chrome
1. in Chrome, adjust browser to be a shorter height
1. click `Toggle Dialog`
1. open the action menu, the menu will flash (rendering position top), then render position bottom
1. the menu should not flash
### Screenshots
### What browsers are you seeing the problem in?
Safari, Chrome
### How can we reproduce this issue?
1. Go to
1. Click on 'Toggle Dialog'
1. Click to '....' open the `sp-action-menu`
### Sample code or abstract reproduction which illustrates the problem
*No response*
### Severity
None
### Logs taken while reproducing problem
*No response*
### Would you like to track this issue in Jira?
- Yes, please tell me the ticket number!
Contributor guide
Research direction
Start with the CodeSandbox reproduction and the sp-action-menu component, using the short-viewport Safari and Chrome steps to observe the overlay behavior. Done means the menu renders consistently within the viewport on repeated openings and does not flash into an incorrect position in Chrome.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100