Bug 264069 – Nested popovers position incorrectly and get "stuck" when made visible before showing popover

• Component: Layout and Rendering
• Status: NEW

[Elliott Marquez]

## Problem

When nesting popovers with `position: absolute`, nested popovers do not apply given `inset`s when they are made visible (`display: block`) before calling `popoverEl.showPopover()`. Additionally, WebKit gets "stuck" and refuses to change position of the element when given new insets.

Making the child visible before rendering is useful for nested menus since you need to know the size of the menu before rendering it in order to position it since we do not yet have the anchor positioning proposal in the platform just yet.

## Reproduction

1. Render a parent popover and a child popover that is a child of the parent that are `position: absolute` and `inset: auto`
2. make the parent popover visible (`display:block`, give it an inset, and show it with `showPopover()`
3. make the child popover visible with `display: block`
4. await an animation frame
5. show the child popover with `showPopover()` and give it an inset
6. See how the child popover has not rendered correctly and has not applied its insets

Here is a live reproduction:

https://lit.dev/playground/#gist=a35f9c9c3fbe701dbfbc721e5645448f

Press `show popovers` button to make the popovers visible.

while open click the `toggle insets` button to show that the new insets do not apply to the nested popover.

Press the jiggle button to toggle the `position` value to unstick webkit

## Workaround

- Toggle the `position` value with a RAF in between
- Make sure to call `showPopover` in the same frame

[Radar WebKit Bug Importer]

<rdar://problem/118147021>