[Bug]: sp-picker flicker issue when the sp-picker is rendered inside sp-popover which is triggered on sp-action-button click

[shruti-nath]

Code of conduct

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

Impacted component(s)

sp-picker, sp-popover, sp-action-button

Expected behavior

Upon clicking on the 'sp-action-button', the popover should be triggered with 2 sp-picker elements inside it.

Actual behavior

Upon click on sp-action-button, the popover gets triggered which contains 2 sp-picker elements inside it but it flickers in 2 ways:

1. sometimes the popover which assigned 'top-end' placement keeps on moving to different positions while it is in open state.
2. sometimes when the popover is open, the sp-pickers elements flickers, they appear and suddenly disappears.

This issue observed in Safari browser in Mac and all browsers in Windows.

Screenshots

No response

What browsers are you seeing the problem in?

Safari

How can we reproduce this issue?

1. Open Safari in Mac.
2. Go to 'https://stage.projectx.corp.adobe.com/'
3. Click on 'Profile avatar'
4. Select 'Features'
5. Select 'hzwebcam-video-recording' and enable it.
6. Click on Save
7. Once page is reloaded, click on Document tab and then click on Document say presentation (except Drawing / Webpage).
8. Once the editor page is loaded, add any image on the documents's current page.
9. Click on 'Media' in the left navigation.
10. Click on 'Video' sub tab.
11. Click on 'Record yourself' button.
12. A dialog opens.
13. Now notice a 'Settings' icon, click on it.
14. A popover opens which has 2 dropdowns for Camera & mic in it.
15. Play with it and you'll notice that the sp-picker dropdowns flicker and disappear / re-appear.
16. Sometime the popover changes its placement.
17. Note this does not happen on all machines.

Sample code or abstract reproduction which illustrates the problem

No response

Severity

SEV 1

Logs taken while reproducing problem

N/A because inspecting suggests that the picker element is still present in the DOM when it disappears.

[najikahalsema]

@shruti-nath Can you reproduce this in webcomponents.dev so that we can abstract the issue?

[najikahalsema]

@Rajdeepc

[shruti-nath]

@shruti-nath Can you reproduce this in webcomponents.dev so that we can abstract the issue?

@najikahalsema : The exact issue is getting reproduced here. Try this out in Safari - https://studio.webcomponents.dev/edit/bAxHQqSHMHh9PkI2hnUQ/src/index.ts?p=stories

[shruti-nath]

PFA both the recordings (Safari browser)
https://github.com/user-attachments/assets/bba4e03f-ed37-4030-8803-b46607945620

issue-safari.mov