adobe / adobe/spectrum-web-components
[Bug]: Severe delay (> 6s) opening overlay with showModal() due to forced reflow
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 262
- Avg merge
- 3d 10h
- Merged PRs (30d)
- 68
Description
### Code of conduct
- [X] I agree to follow this project's code of conduct.
### Impacted component(s)
Overlay
### Expected behavior
On all devices opening a simple modal overlay should be fast.
### Actual behavior
On lower end devices (e.g. Samsung A12) opening a modal overlay can take > 6s due to a forced reflow that using this Overlay functionality causes. This does not happen with the non-modal options for Overlays.
This can be seen with the sample overlays at https://opensource.adobe.com/spectrum-web-components/components/overlay/ and while the forced reflow will be seen in Chrome Dev Tools for *any* device, faster devices seem to process it quickly enough that it's not a significant issue. Lower end devices, however take a severe amount of time to reflow and effectively appears broken to the user.
Note that this does not occur for the other overlay types and those open in a more reasonable time
### Screenshots
This is the screenshot of Chrome Dev Tools showing the excessively long forced reflow

### What browsers are you seeing the problem in?
Chrome
### How can we reproduce this issue?
1. Open https://opensource.adobe.com/spectrum-web-components/components/overlay/#modal on a lower end Android device (e.g. Samsung A12) in Chrome
2. Tap on the 'open modal' button
3. Wait ~6s for the modal dialog to actually open
### Sample code or abstract reproduction which illustrates the problem
_No response_
### Severity
SEV 1
### Logs taken while reproducing problem
Attaching the performance profiling from opening the above overlay on my Samsung A12
[overlay_dialog_open.json.zip](https://github.com/user-attachments/files/17981846/overlay_dialog_open.json.zip)
Contributor guide
Research direction
Start by reproducing the modal overlay at the linked component demo on a lower-end Android device in Chrome, then use the attached performance profile and Chrome DevTools to locate the forced reflow. Inspect the Overlay implementation and compare modal behavior with the non-modal options. Done means the modal opens without the severe delay, including on the Samsung A12 reproduction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, performance, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100