Using Dialog for modals causes sticky elements to flicker

[EricDotSmith]

I have a sticky element at the top of my page, when you open a modal with headlessui's Dialog tag, it causes the sticky div to flicker; meanwhile if you open the modal without headlessui's Dialog tag, the sticky div doesn't flicker. Why is this happening? Is there a way around this? I want to use the Dialog tag as it handles most of what I want from a modal, but I'm also not liking the flickering its introducing. This is happening on iOS on Safari.

Here is the repo used to demonstrate this issue: https://github.com/EricDotSmith/HeadlessUIDialogFlickerSafariiOS

UPDATE: To add more context, it's clear that the overflow: hidden that's being applied to the html tag from somewhere within Dialog is causing this issue. Unfortunately, I still haven't figured out a way to remediate this issue.

RPReplay_Final1677292567.MP4

[EricDotSmith]

Related: #2181

[alex-carter-mobdev]

best solution
html:has(dialog[open]) {
/* remove the main scrollbar when dialog is open */
overflow: hidden;
}