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

[matthewmjohnson]

Code of conduct

• 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

[rubencarvalho]

I was able to reproduce this issue (not exactly 6 seconds, but closer to 2-3 seconds) by setting the CPU (M3 Max) to 20x slowdown throttling in the developer tools.