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
Unable to click the confirm/cancel button of tall popup in iOS #1948
Comments
@gverni will you have time to take a look at this issue? I don't have iPhone at my working place atm, and the issue is not reproducible in iPad which I do have for testing purposes. |
sure @limonte. I reproduced it on iPhone, and for completeness, it happens only with Safari. Chrome doesn't have that bottom bar, so the issue is not reproducible there. |
Again, if that seems to be the browser issue, we have no choice than report the issue to https://bugs.webkit.org/ , recommend workarounds for our users and wait for the fixed release of Safari. |
Let me correct the statement. Chrome does have the bar, but doesn't get in the way. Also, I've noticed that I'm able to scroll the page behind the modal with the long content modal. Was there any change to that recently @limonte ? One final observation (that can explain this behaviour). If you scroll a page to put a button at the very bottom of the screen, when you try to click it, the bottom bar appears, the button gets pushed up, but the Video below: |
Roger, thanks!
Nope, should be blocked. If not, please report the issue. Thank you!
That's weird and does seem like an issue (or a "cool" feature) in Safari :/ |
I do not know if this helps because it is Bootstrap, but it might get you headed in the correct direction to fix the content scrolling behind the SweetAlert,: I had this exact issue with the Bootstrap model. I had to do this: JavaScript:
|
💰 Money for code! 💰 I will donate $10 for the PR with the fix for this issue (donation will be done after approval and merge). |
@gverni let's see if the community will be able to help us with this issue. It's bothering me and I have no idea how to fix this iOS "feature" :) |
This happens to all buttons that need to be clicked on a a web page that is close to the bottom of the iPhone. It is not modal related it iOS Safari related. iOS Safari developed this way because they wanted to give the user a faster way to get back to the bottom tool bar without scrolling back up first. So yes you have to click twice for any button on the bottom to fire the click event. |
I have tested the button clicking on iOS Chrome and it does not do what Safari does. iOS Safari built their app to make the bottom toolbar appear when clicking close to the bottom is built into their app. |
The content behind the model can be scrolled only when the SweetAlert Modal is longer than the device height. |
I forgot to mention it does this on all browsers on iOS. |
Thank you @wilecoyte78 for your input! |
https://medium.com/@draganeror/iphone-x-layout-features-with-css-environment-variables-d57423433dec
|
Good reference, but I think that setting the But I was missing the About the older browsers support, I think we should no provide support for legacy browsers because we are fixing an issue that affects iPhones that doesn't have the home button (iPhone X+), so what the chances of having older browsers in this scenario? I think we should keep as strict as possible to this constraint to reduce the possible side effects we could introduce. If other cases show off, then we add this fallback. |
🎉 This issue has been resolved in version 9.14.2 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Current behavior
Instead of button being clicked, the bottom panel appears. It'll be possible to click the button after additional scrolling.
Expected behavior
Users should be able to click the button
Live demo
https://sweetalert2.github.io/#long-text
The text was updated successfully, but these errors were encountered: