How to remove mobile iOS vertical elastic

axure-share-mobile-app
bug-report
mobile-prototyping
#1

I’m working on a mobile application prototype. I’ve been using the Axure Share application on iphone 8. Even though I have the prevent elastic vertical scrolling checked in the project settings, this is still occurring. It really takes away from the mobile app feel. Is there script or an alternative to fix this or maybe a different setting?

Screen Shot 2018-04-06 at 5.10.05 PM.png1260×1218 105 KB

#3

Hi crolbiecki_OX,

To start, could you let me know what iOS you’re running? You can find this by opening up “Settings > General > About > Version”.

We do have a bug report on file where selecting the “Prevent vertical page scrolling (blocks elastic scrolling” checkbox will freeze the entire page, i.e. there is no elastic scroll, but the ability to scroll in general is gone. If this is what you’re experiencing, what will help is to use the OnDrag or OnSwipe events with the Move to/by interaction to move the content, rather than depending on mobile scroll. Please note that the OnDrag and OnSwipe events are only available with dynamic panels.

If you’re seeing otherwise, is there a chance you’re running an iOS later than 11.2? I ask because I’m seeing on my iPhone (running 11.4 beta) that selecting the “Prevent vertical page scrolling (blocks elastic scrolling)” will not freeze the page, but the elastic scroll is also very apparent. That is, this setting breaks entirely on my phone. If this is what you’re experiencing, we have this filed with our QA team as well, and I’ll make a note to the case to let our QA team know that other users are running into this issue.

#4

Hi Jane, I have this issue.
“Prevent vertical page scrolling (blocks elastic scrolling)” is DEFINITELY checked however elastic scroll is very apparent. Up/down scrolling works normally.
Another prototype I have created is set up the same way but is not displaying this issue.
My iOS is v 11.3.1.

#5

Hi! It sounds like you’re seeing that elastic scrolling is occurring on one of your mobile prototypes on iOS 11.3.1 despite having “Prevent vertical page scrolling” enabled. For the prototype that is not displaying the issue (i.e. elastic scrolling is successfully blocked), are you viewing it on the same phone? If so, are you viewing both in the Axure Share app, or in the mobile browser? Are there any differences in the setup of the prototype pages (e.g. presence or absence of scrollable dynamic panels), or were they published from different builds of Axure RP?

In the meantime I’ve gone ahead and added your case to the report on our end for elastic scrolling on iOS 11.3+ being broken.

#6

Hi Alyssa, just wanted to give you an update. This turned out to be a bit of a false alarm. I finally worked out that the 375px horizontal lines I had on the page were causing the vertical scroll on the iPhone 7 screen (even though I had them positioned at x = 0). Once I reduced them to 374px there was no more vertical scroll.

#7

I’m experiencing this problem as well, on several (different) Apple devices, all with 11.3 iOS versions. It happens in both Safari and Chrome, as well as in the Axure app, and when placing the prototype as an “app” on the homescreen.

The workaround mentioned here works, sort of, for mobile, but when viewing the prototype on desktop (I use both), a sticky tabbar is also all the way at the bottom of the screen.

I have usability tests coming up, for which I now need to rework all of my prototypes… help!

#8

Hi MaartenLighting,

Our QA team has this issue on file, so I’ll go ahead and let them know that more users are being affected by this elastic scrolling bug.

If you’re seeing that the pin to browser approach you linked to does help, that may be the best option for a workaround in the meantime. Using two different adaptive views, such as a mobile view that has the elements pinned and a desktop view that doesn’t, may help with the disparity you mentioned when viewing your prototype on mobile vs. on desktop. If you’re not yet familiar with adaptive views in Axure RP, you can read more about them here:

https://www.axure.com/support/reference/adaptive-views

If you think you may need some additional help with your file, feel free to send it over to us at support@axure.com and we’ll be happy to take a look!

#9

I’m using the pin-to-browser method for now (which has some unintended, but welcome side effects. E.g. not having to use a drag routine to make a page scrollable), until this has been solved. For footers (like a tab bar), the pin-to-browser doesn’t work so well though.

Thanks for the reply!

#10

Hi Axure support,

Any update or guidance on this issue? I’m having the same experience. I’ve selected “Prevent vertical page scrolling” for my mobile prototype. It has the desired effect when i view the prototype (via homescreen or Axure App) on an iPhone 6 running iOS 10.3.2. However, when viewing the prototype on an iPhone 8 running iOS 11 or an iphoneX max running iOS 12, it does not work and the screen “bounces.”

It’s likely that I have items that are 375px wide — do you know if going down to 374 corrects the issue?

thanks

#11

Hi estin,

Unfortunately, there is currently no workaround to remove elasticity from prototypes being viewed on iPhones running iOS 11+ (the problem is not with the width of the prototype). I do want to mention that this “Prevent vertical page scrolling (blocks elastic scrolling)” option is removed in the 9 beta, but I’ll go ahead and file a ticket with our respective teams that this is something you’re interested in. :slight_smile:

closed #13
#14

Hi all,

Thanks for the input! The elastic scrolling bug for iOS 11+ in Axure RP 8 is filed with our QA team, but as of yet there isn’t a fix for this. The workarounds mentioned earlier in the thread should hopefully help in the meantime. We’ll update the thread if there is any news, but otherwise please keep an eye on the Axure RP 8 release notes for news on bug fixes. Thanks!