search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.73k stars 1.06k forks source link

On Android/Chrome, opening Dialog results in too much right-padding if the page has horizontal overflow #3396

Open MichaelAllenWarner opened 2 months ago

MichaelAllenWarner commented 2 months ago

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v.2.1.2

What browser are you using?

Chrome

Reproduction URL

fork of your React CodeSandbox starter

Describe your issue

In Chrome on Android (or on macOS with Responsive mode enabled), if there's x-overflow on the page, then opening a Dialog results in too much padding-right getting added to the <html> element. This can be seen in the CodeSandbox link I provided above: if you go there in Chrome on macOS, view the Preview window in a separate tab, and then enable Responsive mode from the Chrome dev-tools, then you should encounter the behavior seen in the video below when you open the Dialog (which is what I'm encountering in Android on a project I'm working on).

https://github.com/user-attachments/assets/ebd076a5-96e1-4088-8ff0-87bdcb3c1282

ElementUser commented 2 weeks ago

Confirmed that this is an issue (see the video in this post for a project I tried using v2.1.3 of the @headlessui/react library in: https://github.com/Sendouc/sendou.ink/pull/1857#issuecomment-2323239293)