bug: Overflow scroll not working in Beta 12

[Gelurban]

Hello,
I just updated to ionic Beta 12 but now the overflow-scroll="true" of ion-content has stopped working.
The native scrolling will not work unless I "scroll" with two fingers. I can no longer scroll with just one finger as I used to.
Any ion-content list with the overflow-scroll="true" property will stop working

Thanks in advance

[mhartington]

Some more info can be found here
http://forum.ionicframework.com/t/bug-overflow-scroll-not-working-in-beta-12/9514/6

With a live demo here
http://www.gasparsabater.com/EMT/#/home

Could be related to 84b5e91 ?

[fredgalvao]

I don't think so, @mhartington , I was the one who suggested the patch at 84b5e91 and I have that code applied to my app since long ago, with no bad side effects. So, considering that this commit has been in my code since before beta.12, I conclude it's not the one to blame entirely.

Unfortunately I can't spend time on this right now to give you more info, but I may have by the end of this week.

[fredgalvao]

I'm almost sure though (with no proofs so far) that this is related to the changes on disabling events on some layers created by ionic in the DOM, as is the .disable-user-behavior class. Some e.preventDefault() or e.stopImmediatePropagation(), I'd bet.

[perrygovier]

Could we isolate the issue a bit more? I'm not having a problem in this codepen http://codepen.io/perrygovier/full/iKgIj/

[homengo]

Just some more informations scroll is working in this codepen http://codepen.io/anon/pen/bfdqI
But it's broken in my app when I try to do the same scrolling buttons thing. The app involve a lot more ( menu and multiple pages ).

[perrygovier]

Right, I'm still having trouble isolating the problem. Is anyone able to see what mix of components or code structure creates the problem? I'd normally say it's something in your specific project, and not really Ionic, but seeing as there's a few of you now... I'm not so sure.

[homengo]

@perrygovier I though the same until I came on this issue and saw I had the same exact problem ( can scroll with two fingers, cannot with one).
The app is pretty classic all I can say is we have ion-scroll and buttons in them, nothing fancy

[shiftynick]

Don't know if this will help you track this down, but if I comment out the enable_detect = true; on line 719 of ionic.js scrolling will come back. I didn't trace the code far enough up the chain to see exactly how this could be a real fix though. I'm sure this would cause all types of other problems, but our site (which is pretty heavy) didn't seem to have any significant issues in a VERY quick look I took.

// mousebutton must be down or a touch event
        else if( sourceEventType.match(/touch/) ||   // touch events are always on screen
          sourceEventType.match(/pointerdown/) || // pointerevents touch
          (sourceEventType.match(/mouse/) && ev.which === 1)   // mouse is pressed
          ){
            enable_detect = true;
          }

[lipe11]

I have the same issue and found that is when I use ion-content inside a ion-side-menu-content.
When I removed the ion-side-menu-content it worked but lost the sidebar.
Hope this helps.

[lipe11]

My whole structure is: ion-side-menus -> ion-side-menu-content -> ion-nav-view -> ion-view -> ion-content

[fredgalvao]

My structure is almost always the same as the one mentioned by @luis-castillo, so that would justify overflow-scroll not working on my side too.

[perrygovier]

Still working on this. Just wanted to leave this codepen here since it's what I'm testing against.
http://codepen.io/perrygovier/pen/Lueip?editors=100

[BondaCB]

We are also having this issue in some projects. Our structure is the same as @luis-castillo :
ion-side-menus > ion-side-menu-content > ion-nav-view> ion-view > ion-content

The codepen given by @perrygovier has the same issue on my nexus5. Works sometimes with 1 finger, but the scroll eventually stops working and needs to be done with two fingers

[mbody]

+1, with same structure, on nexus 5 too.

[rsylvian]

Same thing as @luis-castillo. Scroll with 2 fingers is working.
Tried the dirty fix of @shiftynick and it's working like a charm.

[Nivl]

Same thing as @luis-castillo for me too, on Galaxy S 4

[mathieumailfert]

Hello,
Same thing as @luis-castillo on nexus 5

[emgould]

Any update on this?? This is not a small issue as ionic's scrolling experience( at least on android 4.4 and modern device ) is poor. Need to be able to use native scrolling.

[emgould]

Better HACK. The ionSideMenuContent directive is blocking the propagation of y-scroll events. Not sure why this is the case and I have not tested it across devices HOWEVER...given that there has been no response on this issue. If you are having this scroll issue when using side menus. Commenting out the prevention of event propagation will enable 1 finger scrolling once again. For ionic.bundle.js comment the following line:
Line: 43537

function onDragY(e) {
if( getPrimaryScrollAxis(e) == 'x' ) {
// e.gesture.srcEvent.preventDefault();
}
}

Ionic folks...if you know why this code it there to begin with and what scenario it is preventing issues then it would be nice to fix it so it works with android w/sideMenus.

[Nivl]

@emgould Nice thanks! I haven't checked with your hack, but the one from @shiftynick was actually breaking at least a couple of other gestures (like the long tap if I remember correctly). Hopefully yours won't break anything.

[rsylvian]

Nice fix by @emgould but break the scroll on my app sometimes. Here is how to do reproduce this:

On your scrolling page, access another ion-content base view (without scroll) by clicking a button. Then go back by using the "back button". Scroll doesn't work anymore unless your are making a right or left gesture (to display the sidemenu).

Ionic team: please take a serious look at this thing. This bug is so annoying and break so much thing on just a regular app.

[perrygovier]

Fixed in 622667b

[fredgalvao]

@perrygovier , thank you very much for this, really.

Is there any ETA on beta.14? Looking foward to finally upgrading.

[perrygovier]

Ionic, being so magical, has punctuality similar to that of wizards.
</perry-trolling>

[fredgalvao]

You will never be able to output a response as good as that again.

[rsylvian]

@perrygovier ❤️

[nokturnal]

@perrygovier best. reply. ever. :)

P.S: thanks for the fix 😄

[nokturnal]

... In my testing this does indeed restore single finger vertical scrolling, but it disables the swipe gesture that slides the side menu out... Am I a moron and didn't implement this one character fix properly?... probably ;)

UPDATE: I think this is another issue specific to my implementation of sidemenu combined with updating from library to library to library. I will update when I get my head around this :)

UPDATE 2: Yes, this fix is breaking the sliding out of the side menu on a left to right swipe gesture...

[nokturnal]

Does anyone else have the above side effect of the fix?

[perrygovier]

Can you provide a codepen that reproduces the issue in a new ticket? I'm unable to reproduce this with a basic example http://codepen.io/perrygovier/pen/veJwi

[nokturnal]

Here is the easiest way to reproduce this issue:

Create new app via:

ionic start scrollTest sidemenu

Modify "PlaylistsCtrl" Controller to ensure vertical scrolling:

.controller('PlaylistsCtrl', function($scope) {
    $scope.playlists = [
        { title: 'Reggae', id: 1 },
        { title: 'Chill', id: 2 },
        { title: 'Dubstep', id: 3 },
        { title: 'Indie', id: 4 },
        { title: 'Rap', id: 5 },
        { title: 'Cowbell', id: 6 },
        { title: 'Breaks', id: 7 },
        { title: 'Jungle', id: 8 },
        { title: 'Drum & Bass', id: 9 },
        { title: 'Classics', id: 10 },
        { title: 'Blah', id: 11 },
        { title: 'Foo', id: 12 },
        { title: 'Bar', id: 13 },
        { title: 'House', id: 14 },
        { title: 'Trance', id: 15 },
        { title: 'EDM', id: 15 },
        { title: 'Country', id: 16 },
        { title: 'Rock', id: 17 }
    ];
})

Set overflow-scroll to true in playlists.html:
<ion-content class="has-header" overflow-scroll="true">...

Apply above fix to line 43582 of ionic.bundle.js (v1.0.0-beta.13):

//return 'x';
return 'y';

Add Android as a platform:

ionic platform add android

Launch app on device:

ionic run android

Result, vertical scrolling is enabled, but now the side menu does not slide out on a device (tested on Android).

@perrygovier, do you still want me to create a new issue for this?

[mbody]

Yes, I do !
I guess that "side effect" is just the right name for it! ;)
However, I can't tell for sure if it really is a side effect of the fix or
another issue altogether...

2014-11-04 16:34 GMT+01:00 nokturnal notifications@github.com:

Does anyone else have the above side effect of the fix?

—
Reply to this email directly or view it on GitHub
#2201 (comment).

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.