iOS scroll issue when using the left edge of the screen

ionic-v1
1

Hey there. I am experiencing an annoying issue on iOS where the views content disappears when the user scrolls vertically by touching the left hand side of the screen. This issue only appears on ios and not on Android.

The issue also only occurs on states like tab.candidate-detail. There isn’t a problem on the top level views (Candidate detail view is a child of the candidate view and the candidate view doesn’t have the scroll issue)

  .state('tab.candidates', {
  url: '/candidates',
  reload: true,
  cache: false,
  views: {
    'tab-candidates': {
      templateUrl: 'templates/tab-candidates.html',
      controller: 'CandidatesCtrl'
    }
  }
})

  .state('tab.candidate-detail', {
  url: '/candidates/:objectId',
  reload: true,
  cache: false,
  views: {
    'tab-candidates': {
      templateUrl: 'templates/candidate-detail.html',
      controller: 'CandidateDetailCtrl'
    }
  }
})

I have tried deleting all the front end code within the content tag, so there doesn’t seem to be an issue with the code in the view.

Our app is in production and this issue on ios slipped past the testing…

Does anyone have any tips or suggestions?
Thanks!

2

How can we recreate this problem?

4

It’s probably because of the swipe to go back. If the user pulls right from the left edge, even 1 pixel, it will start loading the previous view and closing the current. So if that view has any state events or is loading stuff it can mess things up.

Try adding

can-swipe-back="false"

on the Ion-view element and see if that helps it.

You can also re-create this by swiping back from the left side then go back left and don’t complete the swipe. If it breaks the app then that is the culprit.

5

This looks really promising. I’ll try it now and let you know if it fixes the issue. Thanks.

6

No problem. You can disable that swipe to go back feature across the entire app with

$ionicConfigProvider.views.swipeBackEnabled(false); in your app.js config section (don’t forget to add $ionicConfigProvider in the config function).

7

Thanks for the help, this did the trick!!

1 Like