-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Closing Dialog breaks site on Safari mobile (<ios 14) #1705
Comments
It should be issue :maybe |
Yes this is happening for me as well. Seems to be not only Safari but just small breakpoints in general. In Chrome the Dialog component does the same thing at small breakpoints. You can press the Escape key multiple times and it will trigger opening and closing the Dialog as many times as you want to. |
it seems that This is a serious problem, and it will break all user operations on website, i preparing migrate all Dialog/Transiton to |
tailwindcss is amazing but tailwindui update/bug fix / corresponding very very slow. :( |
This issue also affects an older Electron/Chromium browser I use. I've been force closing the Dialog component via onClose as a workaround to remove Dialog.Overlay, but doing so of course eliminates the exit Transition, making this workaround non-ideal. |
Also experiencing this on latest Chrome. As mentioned, the Dialog component does not seem to clean up after itself when combined with I was able to work around this by setting the E.g., from this:
To this:
|
Oddly, for me this does clean up the overlay but it also kills off the exit transition. |
It's a little more involved, but maybe this would preserve the exit transition?
|
i think the transition implementaiton is bad, it seems that it not easy to fix. i have just give it up, cause of "no multiple Dialog" context support, "no transition dialog campaitible for old safari browser", and "slowly feedback for these bug", i prepare to switch to |
After doing this I am encountering this error
Do you have any idea on how to fix it. |
@denniswanjiru no idear for this at now, i am doing migration all front end code from |
Hey! Thank you for your bug report! First of all sorry for the slow response. I've been looking into this issue and this is currently happening because you are on iOS 13.2. Internally we use the Even if you don't want to update to iOS 14, 15 or even 16, I think updating to iOS >= 13.4 should solve this issue already for iOS devices. -- @HIT2022 which version of Electron / Chrome are you using? Can you create a minimal reproduction repo so that we can take a look at this problem? -- @mshick the example you showed technically works, but it bypasses the You also mentioned "latest Chrome" could you create a minimal reproduction repo of that behaviour? Screen.Recording.2022-08-31.at.13.31.45.mov |
@RobinMalfait here is the user agent string - https://user-agents.net/string/mozilla-5-0-windows-nt-6-3-win64-x64-applewebkit-537-36-khtml-like-gecko-colibri-1-10-0-chrome-66-0-3359-181-electron-3-0-10-safari-537-36 I can re-create via https://headlessui.com/react/dialog - |
Ah perfect thanks @HIT2022. Looking at that one it looks like you are on Electron version 3 (which is 15 versions behind) and Chrome version 66 (which is 40 versions behind) and came out in April of 2018. This is also the source of the same issue as iOS 13.2 issues because I don't know if we will find a good solution or even want to support such old versions. But at a minimum I would recommend you to update at least a few versions because you are behind quite a a lot and many of those upgrades contain important security fixes as well. |
Unfortunately updating versions is not possible as my app's userbase is comprised of users of a commercial release of Electron/Chrome that was deprecated following the release of a replacement (yet heavily panned) software. But I understand & would of course not expect 4 year old browser implementations to still be supported. Thanks for the detail. |
If we find a solution that solves these issues (e.g.: not using native Since the original issue is also about an old version of iOS I'm going to close this issue because of the aforementioned reasons. I know there are still some issues around the
Those will be solved in one of the next PRs. If anyone has other issues feel free to open new issues with minimal reproduction repo(s) attached so that we can take a look at those. Hope you all understand! |
Closing a dialog in Safari on iOS 13.2 renders my app unusable. The problem seems to be the node
What package within Headless UI are you using?
"@headlessui/react": "1.6.6",
What browser are you using?
Safari ios 13
Reproduction URL
https://github.com/tianyingchun/headlessui
http://localhost:3000/
on the modern mobile safari (ios15) it works fine .http://localhost:3000/
on the safari of ios 13 clickOpen Sidebar
it will popup modal, while close dialog please see below domwhile sidebar modal is open, and try to close it , and then try to re-click
Open Sidebar
, the web page is no response. the reasons as below picture shown.Describe your issue
while Dialog closed(transition end) it should clean
<div id="#headlessui-portal-root" />
, && remove<html style="overflow: hidden;" />
at safari of (ios <14 )related existed issue #1538
The text was updated successfully, but these errors were encountered: