[Bug]: Modal overlays over non-modal overlays create a page-wide flicker (once)

[hunterloftis]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

overlay, picker, dropdown, more

Expected behavior

A modal overlay can open over a non-modal overlay without any visual artifacts.

Actual behavior

The first time a modal overlay opens over a non-modal overlay, the page flickers.

Screenshots

• video 1
• video 2

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

No response

Sample code that illustrates the problem

        <overlay-trigger type="click">
            <sp-button variant="primary" slot="trigger">
                Open "click" overlay
            </sp-button>
            <sp-popover slot="click-content" dialog>
                <overlay-trigger type="modal">
                    <sp-button variant="primary" slot="trigger">
                        Open "modal" overlay
                    </sp-button>
                    <sp-popover slot="click-content" dialog>
                        Modal overlay
                    </sp-popover>
                </overlay-trigger>
            </sp-popover>
        </overlay-trigger>

Logs taken while reproducing problem

No response