reactjs
iOS Mobile Touch Scrolling Issue
Summary:
I have a ReactJS web app that is embedded into a WordPress website via an iframe: https://www.advanceoc.com/social-progress-index
The ReactJS web app has a "modal" that overlays the map component after selecting a location on a map.
On mobile, when scrolling within the ReactJS web app's "partial scorecard and scorecard" modals, the only way to scroll back to the WordPress content is to use a two-finger swipe gesture. Otherwise the user is "trapped" in the modal's scrolling content.
As it is not common for most people to know the two finger swipe gesture, is there a way to have that functionality be the default when swiping from within the ReactJS web app's modal?
Steps to reproduce:
- Open link up on your iOS device, scroll down to the map app, vertically center the section, and select a location on the map.
- Scroll up and down in the modal that pops up. Try clicking "See Scorecard" for longer modal content.
- Depending on where the iframe element was vertically centered in the device screen, you might be unable to close the modal or scroll far enough down to see all the content.
Expected behavior:
Expected behavior would be having the WordPress site be scrollable when in the map app modals so one can navigate seamlessly.
Link to example of issue:
https://www.advanceoc.com/social-progress-index
