I’m currently building a mobile prototype for user testing in Axure RP 9. My prototype consists of 1 page that has 3 different states encapsulated in a Dynamic Panel. The page has a sticky header and footer that do not change other than a dynamic panel of circles in the footer. To move between each state, the user can either tap on the tabs or swipe left or right between states.
The content of each state is vertically longer than the Dynamic Panel, so the user must scroll to see information further down on the page. When I first open the prototype, my dynamic panel scrolling works as intended for the most part. As soon as I switch states by swiping or clicking on the tabs, the dynamic panel scrolling no longer functions, the elastic scrolling from the Safari iOS browser takes over and the user is not able to scroll up or down the dynamic panel, only the entire safari page scrolls. When previewing the prototype in the computer browser, it functions exactly as it is supposed to.
I’ve seen that RP 9 has removed the option to “Disable Elastic Scrolling”. So my question now is, how do I fix this to allow a user to scroll a dynamic panel on mobile, not scroll their entire web browser page? Is this a bug or is there a new method to preventing iOS devices from scrolling your entire prototype rather than just the dynamic panel that is supposed to be scrollable?
Video: https://www.youtube.com/watch?v=ewOxHuo0hGs
Prototype: https://iuhe6i.axshare.com/#id=fen54e&p=race_hub&fn=0&dp=0