Side menu swipe performance

ionic-v1
1

I’m using the side menu but the problem is that when the menu-content is large with some images the swipe gesture becomes too slow as the web view is transforming a large DOM node. I wish there was a simple way to make the side-menu appear on top of the content, making the swiped elements relatively smaller and resulting in a significantly smoother experience.

2

So we do have that as an ion

But do you mind creating a simple codepen showing the decreased performance? We may be able to see if theres anything we can do to improve it.

1 Like
3

Thanks a lot. this looks like what I’m looking for. I’ve been busy lately but I will try it as soon as I can and tell you. I can’t find documentation for it though.

I’m too busy to make a sample right now, but I think any list view of 20-30 items with 2 small images per item will make the side menu behavior awkward especially when dragging it.

4

The problem that the OP identifies seems to persist. When the main content is nearly empty dragging the main content is relatively smooth. When the main content has many items (I have a list of 42 items each with an image and some text) the performance is severely degraded. This only happens when dragging to open/close. Clicking a button to open or close the side menu results in quick animation.

Any ideas on improving sidemenu performance when the main content is large?

5

I found this same issue today, ended up disabling the $ionicSideMenuDelegate default and replacing it with a jQuery event. Although it doesn’t give you the real-time ‘tracking’ of the gesture location (i.e. the drag event is triggered with linear animation independent of gesture position/speed), I found it works quite fast in my app, on which I swipe over an img-laden collection-repeat of 200+ items:

$ionicSideMenuDelegate.canDragContent(false);
$('.container-class').on('swiperight', function() { 
  if (!$ionicSideMenuDelegate.isOpenLeft()) {
    $ionicSideMenuDelegate.toggleLeft();
  }
});

HTH

1 Like