adobe / adobe/spectrum-web-components

[Bug]: Severe delay (> 6s) opening overlay with showModal() due to forced reflow

Open
#4,967 3 comments 0 reactions 0 assignees View on GitHub
Browser:Chrome bug Component:Overlay Needs repro SEV 1
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
![Screenshot 2024-11-27 at 1 45 56 PM](https://github.com/user-attachments/assets/cb996406-333a-4c49-baf9-b2cfaf4301eb)

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.