After I purchased an iPad, I’m noticing ‘weird’ behaviors with its iOS browsers. For one, modals don’t scroll (only the background does) unless you first touch the left or right borders of the modal’s pane and then slowly swipe toward the modal’s center without lifting your pencil or finger from the pane. The modal will scroll, slowly, but it will scroll. This is also true on my iOS-powered iPhone. Happens in all the iOS-compatible browsers.
None of the Google-found solutions work for me and many responses recommend NOT to use modals on mobile devices because their OS’s are not ‘ready’ for modals.
Sooo, I wonder why on iOS devices the modal’s borders are sensitive to touch and will remain so while you swipe toward the center but loses the touch if you lift you finger or pencil off of the screen. What does the model"s borders have that it’s center doesn’t?
You can visit: https://www.nittanyleathernecks.com/vmf112/warriors.html on your iPad or iPhone to review my issue. Please let me know your results via the browser(s) and device(s) you test with. If this is a bug (and I believe it is) with Apple’s mobile devices running iOS, maybe it time for an outcry??
I’ve had clients with Apple products complain about the modal behavior on some of my sites as well. I don’t think it’s anything we are doing wrong, but rather a quirk with the Bootstrap modal and the Safari browser (as I have non-bootstrap sites with modals that nobody has complained about.)
As I don’t own any Apple products, I have no easy way to diagnose this problem.
I found this on a Google search. Apparently many people have issues with the Bootstrap Modal and Safari browser.
Thanks for the lead, @Printninja. I also found this site and ‘played’ with it for awhile but time and effort to simply produce a modal that properly works on an Apple mobile device doesn’t warrant my time… especially if I have to charge back the time to my clients… they’ll probably balk and tell me to drop the modal and simply add a page in its stead.
For now, I’m happy to grumble and complain with the Apple developer support folks - maybe they’ll fix things just to get me off of their backs?? 
If I can make a suggestion… why not ditch the modal altogether, and just show/hide the pilot’s bios in divs directly on the page? You don’t need to make each pilot a separate page. Here’s an example for you to reverse engineer. 
http://thelightwavegroup.com/example/example.html
Thanks for your time on this, @Printninja.
This was the original way I did it - which is actually a simpler method than using modals. However on mobile devices, the member’s bios displays below the long column of linked names and folks weren’t seeing them. That’s why I placed them in a modal so they pop up on the screen where the reader will notice them. So one problem solved and another discovered…
Sigh!
For mobile I’d consider doing this with a Bootstrap accordion.
See, I also faced the same issue. Modal was not scrolled properly on my iPad. I use the Safari browser on my device. I didn’t know the reason. It seemed to me that safari can’t verify the identity of the website. if anyone knows how can I resolve this problem, kindly share with me.
It seems like a Safari or software issue.