White content when scrolling from left side of the screen only on a side-menu app on IOS

ionic-v1
1

Hi,

Have you ever head about this strange bug I got on IOS (using online build of phonegab) only, it’s not present when developing on chrome :frowning:
I have a side-menu application with a header (initially generated using ionic cli).

It works perfectly if I scrool the content from the middle or the left of the screen (used in portrait).
But if I try to scroll content from the really left part (maybe 20-30px from the left side) the content become white until I release it, and more, the header left button no longer works.

Strangely (again), the bug is not present on the homepage, maybe because this page has not left button in its header, only the menu button which is not present on other “sub” pages

Here is the code of one of the sub page:

<ion-view id="group-create" cache-view="false" view-title="New group">

  <ion-nav-buttons side="left">
    <a ui-sref="app.home" class="button button-icon ion-chevron-left"></a>
  </ion-nav-buttons>


  <div class="main row has-header">
    <div class="col">
      <error-message></error-message>

      <form method="post" ng-submit="submit()" name="groupForm" error-field="error">
        <div class="padding">
          <label class="item item-input">
            <input type="text" placeholder="Establishment name" name="name" ng-model="name" autocomplete="off" required>
          </label>
        </div>
        <div class="padding text-center position">
          <div>
            <span ng-show="position">{{position.coords.latitude | number:4}}, {{position.coords.longitude | number:4}}</span>
          </div>
          <button type="button" class="button button-block button-calm" ng-click="getCurrentPos()">Current position</button>
        </div>
        <div class="padding">
          <button type="submit" ng-disabled="!position || groupForm.$invalid" class="button button-block button-positive">Create</button>
        </div>
      </form>
    </div>
  </div>

</ion-view>

Thanks

1 Like
2

It seems to be due to left menu touch area on the left, when I scroll horizontally from left to right, my content disapears and the header left buttons no longer works

3

I’m still digging to try to fix it.
To identify the bug source, I restarted from an empty project:

ionic start myApp sidemenu

And, just adding this:

.config(function($ionicConfigProvider) {
  $ionicConfigProvider.views.transition('none');
})

Start to give a buggy apps in some way: In the sidemenu app generated, once added this piece of code, on the playlist part, only the playlist page works fine, if you go to an playlist item page, the left oart of the app start to block the scroll and have a strange behaviour in the header (it disapears)

Here is a small video of the bug: https://vid.me/Agdn

5

Ok, so, I finally fix it by disabling the feature “swipe Back” as said on iOS scroll issue when using the left edge of the screen

$ionicConfigProvider.views.swipeBackEnabled(false);

I guess swipeBack is really buggy, I can’t understand how swipe back is supposed to work while swipe is for left side menu

4 Likes
6

So there are a two parts going on here.

  1. Animations are being disable
  2. Attempting swipe to go back

Both of these settings a bit contradictory.

Swipe to go back is attempting to animate the back transition for that view, but animations are disabled…
So technically, this is correct.

Swipe to go back works by disabling the side-menu when there is a back view in the navigation stack. It’s not buggy, it’s paradigm that you see a lot in sidemenu-based apps in native development.

7

You mean that, what shown in the video is normal?
For this, I just remove the animation on a fresh cli generated sidemenu app

8

Not that it is normal, but that it is expected when you have disabled animations and not swipe to go back. If animations are disabled, swipe to go back has nothing to animate. It’s an unfortunate side-effect of how you configured it.

9

Works fine for me. Thanks!!