Open jeremyscode opened 8 years ago
Trying to get an iOS device to see the bug..
Have you tried using an emulator?
Is there an update on this?
Sorry not yet..
What version of iOS are you experiencing this problem on? I have not came across this bug myself but can test it using BrowserStack and select physical devices.
It seems to happen on most iOS versions. I'm on 10.1.1 and I've had it reported on 10.2 as well. It's only when in Safari and when viewing a page that's embedded in an iframe. See my original comment, going to http://www.kingshope.church/events.html and tapping on an event name causes the page to jump to the bottom rather than stay with the modal that opens. The iframe is embedding the following https://demo.churchapp.co.uk/embed/calendar and when going directly to this url in Safari on iOS everything works fine as expected. Therefore there must be some sort of issue with the plugin when in use in an iframe which is very odd.
The issue does not appear to be with the plugin but appears to be with your code.
This minimal test case uses a dialog in JsFiddle's iframe and works as expected. https://jsfiddle.net/r79hyh43/1/
However your page does display the side affect on iOS. Unfortunately I do not have time to troubleshoot your code any further.
Thanks for your help but I've been able to reproduce the issue in JSFiddle. See the updated JSFiddle at https://jsfiddle.net/r79hyh43/3/. If you scroll the iframe so that the "Click here" link is at the top of the safari view and then tap it you should see that the page jumps down such that you cannot see the modal without scrolling up to it.
Is there an update on this?
Sorry I have no idea how to fix it so far.. can't even see the problem via Chrome's simulator.
Ok, we're also trying to fix it too and will make a pull request if we can fix it. However you won't be able to reproduce it in Chrome's simulator since that only changes the user-agent. iOS Safari works very differently to Chrome and there's even a lot of difference between Mac Safari, Windows Safari and iOS Safari. It's a nightmare. Are you able to reproduce it on with this https://developer.xamarin.com/guides/cross-platform/windows/ios-simulator/.
Turns out that this is an issue with Bootstrap JS itself. See https://github.com/twbs/bootstrap/issues/20352. I've left a comment on the issue and hopefully they'll come up with a solution soon.
I'm really feeling sorry that giving no help to your issue because of the busy days, as now you have located it was a bootstrap issue so hope you can get it solved soon, good luck :)
I know this issue is old but it may help someone coming from Google.
Safari browser on iOS is known to mess up with scrolling on iFrames, this is an ongoing bug that's been driving web developers crazy for years and they haven't (and don't want) to fix it.
Here's a probable solution to your problem using CSS: https://stackoverflow.com/questions/43256782/page-jumping-when-filling-form-in-iframe-on-ios-devices/51251053#51251053
We have used the modal in an embeddable page and it works fine when navigating directly to the page found at https://demo.churchapp.co.uk/embed/calendar. However when embedding it into an actual website, see http://www.kingshope.church/events.html for a draft demo website we've set up, it jumps the page to the bottom on tapping an event in iOS Safari. It works fine in every browser and device we've tested except for iOS Safari. Is there a fix or workaround for this? Thanks!