headlessui
headlessui copied to clipboard
tailwindlabs
On Android/Chrome, opening Dialog results in too much right-padding if the page has horizontal overflow
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
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)
I have this behavior as well on my application: "@headlessui/react": "2.2.0",
