[Bug] Axure 9 is failing to prevent elastic scroll for mobile prototypes

bug-report
mobile-prototyping
#1

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

#2

Hi! The behavior in your file certainly looks buggy; I would expect the panel to still continue to be scrollable even after switching states. That said, I wasn’t able to reproduce the issue in a new file on our end. If you’re able to attach a copy of the .rp file here or send it over to support@axure.com we’d be happy to take a closer look and narrow down what’s causing it so that it can be filed. Thank you!

#3

OddsBoard 1_recovered (1).rp (990.6 KB)

#4

Just to add to my observations since the original post - it seems that any time I have a dynamic panel with multiple states that is scrollable, the dynamic panel scrolling fails to work after the dynamic panel switches to any other state.

The order of what occurs is this:

  1. Create dynamic panel with at least 2 states where at least one state is scrollable.
  2. Change the state to the second state and observe that the scrollbar changes in both function and visuals. The skinny small dynamic panel scroll bar no longer appears and only the large, fat scroll bar is shown which scrolls the entire page, not the dynamic panel.

The only way to fix this is to refresh the page. But the issue will still happen after switching states.
I just had to do a workaround for a prototype where instead of making a dynamic panel with 2 states, I had to make 2 dynamic panels and switch them using show/hide. This isn’t ideal for a variety of reasons and I’d like an explanation as to why my dynamic panel scrolling isn’t working as it is supposed to.

#5

Hello!

Thanks for the followup and sorry for the delay! I’ve been looking over your file, but so far haven’t been able to find a solution that prevents the page from elastic scrolling after you’ve changed panel states. There is a known issue with elastic scrolling not being blockable on iOS, and there are a couple of instances so far where we’ve seen dynamic panels oddly trigger elastic scroll on a page in iOS as well. I’ve gone ahead and added this issue with the state changes on a scrollable dynamic panel contributing to unexpected elastic scroll problems for further investigation.

closed #6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.