Can you disable html overflow="hidden" when Dialog is open?

[JakeSchroeder]

Opening a dialog sets the HTML element inline style as "overflow: hidden"
I am assuming this is to prevent scrolling, however:
This is causing elements with position: sticky to disappear.

headlessui-overflow-issue.mov

[christian-reichart]

same problem, making this optional would be great.

Or maybe change this behaviour to overflow: clip, which is relatively new though: https://caniuse.com/?search=overflow%3A%20clip

[EricDotSmith]

I'm also having a similar issue here: #2305

Did you figure out a work around for this problem?

[christian-reichart]

I switched to the Dialog of Reach UI

[EricDotSmith]

I just tried playing around with it and while it's really great it doesn't quite have the feel I want from a modal like the HeadlessUI Dialog does. I'm thinking of just keeping it and accepting the flicker for now, albeit I hope the team or someone else from the community can figure out why this is happening and fix it.

I'm using this almost line for line: https://headlessui.com/react/dialog

[christian-reichart]

If you want a predefined component you could look broader, the main benefit of HeadlessUI and Reach is that you can customize everything. If you don't need it, there are probably many UI kits out there that do the job.

[EricDotSmith]

Also I can confirm the issue is the overflow: hidden. So far I can't find a good way to override this while maintaining the same behaviour 🤷‍♂️

[psugihara]

Anyone figure out a fix for this? Hitting the same thing with a sticky header.

RPReplay_Final1681919010.MP4

[EricDotSmith]

I would love to know an answer to this as well. But in the meantime I'm considering switching my modals to use preline. Idk if their modals have this issue or not but we'll see.

[sean-clayton]

Having this exact issue with my project: https://github.com/13vaults/13vaults.com/blob/218f092d851c2e5f2f23114c7153c62438db7dbe/components/mega-nav.tsx (https://www.13vaults.com). I only just now realized it was a bug with the dialog component + a sticky element. Losing my hair for weeks over this 😅

Would love to see a way to address this--it might just be a thing only a webkit update can fix though 😿

[sean-clayton]

@reach/dialog works just fine for my use-case. See the diff here how I refactored my component to use @react/dialog and framer-motion instead of headless-ui's dialog and transition components: 13vaults/13vaults.com@d13f471#diff-a75fd728c03405a0d9e680b949580052ab2c5b741a579b1f9daa71dc430d1f3c

[tourlida]

where we should at this class?

[sean-clayton]

It looks a lot like a chat-gpt generated response.

[robinsimonklein]

Yeah, jQuery has nothing to do here...

[benjaminarteaga]

Same issue here... Please provide a solution.

[juanpurpp]

Same issue :(

[v-dev-cl]

Same issue with the current version 1.7.15.

[v-dev-cl]

In my case was my own fault, I had set the element in a sub element causing the issue, so just moving the element one level upper fixed my issue.

[ITSFerroli]

I solve this issue forcing to use always the css property that i want, like so:

html { overflow: clip !important; }

so the inline overflow hidden style is ignored.

[maple146]

This fixed my issue, thanks a lot!

[christian-reichart]

If you need to support Safari, overflow: clip might not be a good solution yet, it's not really supported sadly.

[jessems]

I got around this with a bit of a hack:

  useEffect(() => {
    let timer: number;

    if (open) {
      timer = setTimeout(() => {
        const html = document.documentElement;
        html.style.overflow = 'auto'; // revert to default overflow
      });
    }

    return () => {
      clearTimeout(timer);
    };
  }, [open]);

Wrapping it in a setTimeout puts it in a different execution cycle (I guess). You don't even need to introduce an actual delay.

[alaminShaheen]

doing this makes the body scrollable even when the dialog is open.

[dada878]

I have a sticky sidebar, and when a Headless UI modal opens, the sidebar will not stay sticky.
The following code solved the issue in my case.

html {
  overflow: visible !important;
}

or using tailwind

 <html className="!overflow-visible">...<html>