Bug 264069 - Nested popovers position incorrectly and get "stuck" when made visible before showing popover
Summary: Nested popovers position incorrectly and get "stuck" when made visible before...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 17
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-11-01 17:49 PDT by Elliott Marquez
Modified: 2023-11-08 16:50 PST (History)
5 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Elliott Marquez 2023-11-01 17:49:11 PDT
## 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
Comment 1 Radar WebKit Bug Importer 2023-11-08 16:50:31 PST
<rdar://problem/118147021>