Scrolling occasionally freezes after tapping on screen

[cnnrmtthws]

Short description of the problem:

On an iPhone 6, iOS 9.2, tapping on the screen while scrolling can cause the scrollable content to freeze in place. The scrollbar on the right, will continue to move up/down when performing the scroll gesture but the content remains frozen in place. Leaving the view clears the issue.

I have managed to reproduce this on a blank starter app with a scrollable ion-content. And can reproduce this with both native and js scrolling.

I have attached a zip with the code. scrolltest.zip

I have also created a codepen if that's easier, though I cannot reproduce the issue through the browser.

What behavior are you expecting?

Content not to freeze in place and to be able to continue to scroll the content

Steps to reproduce:

1. Scroll the page up and down
2. Keep tapping on the header (it doesn't have to be the header but I find this is the easiest way to reproduce) while scrolling.
3. Content will eventually freeze in place.
4. Scrollbars will continue to act as though the content is scrolling

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc) I suspect that this issue (https://github.com/driftyco/ionic/issues/5806) is related as though the steps to reproduce are different, the result is similar.

Which Ionic Version? 1.x

Run ionic info from terminal/cmd prompt: (paste output below) Your system information:

Cordova CLI: 6.0.0 Gulp version: CLI version 3.9.0 Gulp local:
Ionic Version: 1.2.4 Ionic CLI Version: 1.7.14 Ionic App Lib Version: 0.7.0 ios-deploy version: 1.8.4 ios-sim version: 5.0.3 OS: Mac OS X El Capitan Node Version: v0.12.7 Xcode version: Xcode 7.2.1 Build version 7C1002

[jgw96]

Hello! Thanks for opening an issue with us! Are you seeing this in the browser, ios emulator or on android too? Also, if you have another ios device can you reproduce it there too?

[cnnrmtthws]

Hi. I have reproduced the issue on an iPad 2 iOS 9.2 but was not able to reprodue the issue on an iPad mini with iOS 8.4. I also haven't been able to reproduce this in the browser or on Android so far. I haven't had much luck getting the ios simulator to actually work properly to check there.

[jgw96]

@cnnrmtthws Thanks for the info! Are you having issues with the ionic emulate ios command?

[cnnrmtthws]

@jgw96 Hi sorry, I was having an issue where the simulator wouldn't launch but it seems to be working fine this week. I haven't been able to reproduce the issue in the simulator using the steps above, but that may be due to it being more difficult with only a single mouse pointer rather than being able to use multiple fingers. I have managed to reproduce it in the simulator (and on device) by repeatedly tapping the status bar to scroll up when momentum scrolling.

[danbucholtz]

@cnnrmtthws, I am having a hard time reproducing this. I have downloaded the zip file and ran that on my iPhone 6S, and then I also pulled down the codepen and tried that as well for good measure. When you're tapping on the header, are you tapping while the intertia scrolling is happening, or while your other finger is actively dragging the content up or down? I have tried both. I have also tried slow, rhythmic tapping on the header, and tapping rapid fire. I have tried this for about 5 minutes or scrolling up and down. Does it typically take a while to reproduce? Does this happen on iPad, iPhone or both?

Any additional suggestions on how to recreate? FWIW, I am running iOS 9.3.1, which is the latest iOS.

Thanks, Dan

[cnnrmtthws]

@danbucholtz I think its when the intertia scrolling is happening. I have not found it to be immediate but certainly not more than a couple of minutes max. I have managed to reproduce on both an iPhone 6 and on an iPad 2.

I can reproduce a hang almost imediately by scrolling and while the inertia scrolling is happening and double/tripple tapping the status bar rapidly, which trigger the scroll to the top. I find that this causes the scroll to be stuck more often than not after that point. I am not sure if this is a different issue though.

[danbucholtz]

@cnnrmtthws, I can't reproduce on my device (6S) or with the simulator of an iPhone 6. Any ideas?

[cnnrmtthws]

@danbucholtz Hmm I have been able to reproduce it on the simulator as well as the iphone 6. After rapidly tapping the status bar at the top I tend to see a white flash as well. I will try and capture a video of reproducing it the simulator as you have done.

[jgw96]

@cnnrmtthws did you ever get a chance to get that video together? I just did some more tests using the ios simulator emulating an iphone 6 running ios 9.3 and an Iphone 5 running ios 9.3 and could not reproduce it either unfortunately.

[cnnrmtthws]

@jgw96 sorry just recorded it now. I can still reproduced. I upgraded the iphone 6 to 9.3 to make sure that wasn't the issue and I can still reproduce it there. I also tried building through the ionic platform build, rather than locally, and I was also able to reproduce the issue with that version.

[danbucholtz]

@cnnrmtthws, Cool. We'll take another look when we have some time. Is there anything that you think we could be missing or doing wrong?

[cnnrmtthws]

I can't think of anything, the steps i was using look like the same steps that you were using in your video, i.e momentum scrolling and then rapidly tap status bar results in the scroll being frozen. The fact that you haven't been able to reproduce makes me wonder if something is wrong with my environment, hence my trying the build with the ionic platform service.

[jgw96]

Hello @cnnrmtthws ! Are you still having this issue?

[jgw96]

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

[tlancina]

Ran into this a few times with the scroll triggered by the keyboard as well. It seems to be when the scroll view is already in motion and something else programmatically triggers scroll (like the keyboard or the status bar tap).

Thanks to @cnnrmtthws I can reliably repro using https://github.com/driftyco/ionic/issues/5932#issuecomment-213437102 on a 5s by starting a scroll and then spam clicking the status bar (sometimes it takes a few tries).

[yazanExalt]

Hey guys, I had the same issue. I was setting the default jsScrolling to false. What I did is: I set the jsScrolling to true $ionicConfigProvider.scrolling.jsScrolling(true) in the config part.

[ShawnXu]

Is there an equivalent approach to jsScrolling in ionic 2?

[jgw96]

Hello all! Is this an issue with our fork of the WkWebview plugin?

[SebastianSchirmer]

To me this seems to be a similar issue as the one described in #5806 which we are dealing with using a custom directive, see my comment https://github.com/driftyco/ionic/issues/5806#issuecomment-203867400

Under some circumstances, overflow-scroll is set to "hidden" but not set back to "scroll" anymore which makes the screen freeze. The reason for this is unknown to me, we experienced it a lot when opening and closing the keyboard, hence the custom directive I mentioned above.

Maybe this helps in investigating this issue...

[saurabhudaniya200]

I saw that after tapping on the statusbar multiple times the ion-content gets inline style set to overflow:hidden(this is required to fix the -webkit-overflow-scrolling issue I guess), I did the following things to fix it.

1) setting !important to overflow-scroll

.overflow-scroll{
  overflow-y:scroll!important;
}

2) Added one more class called hideScroll

.overflow-scroll.hideScroll{
    overflow:hidden;
    overflow-y:hidden!important;
}

3) handled the statusTap event in the application itself like below.

window.addEventListener("statusTap", function() {
                        var ionContents = angular.element(document.querySelectorAll('ion-content.overflow-scroll'));
                            angular.forEach(ionContents, function(elem){
                                var elm = angular.element(elem)
                                elm.addClass('hideScroll');
                            });                            
                            $ionicScrollDelegate.scrollTop(true);
                            $timeout(function(){
                                angular.forEach(ionContents, function(elem){
                                    var elm = angular.element(elem)
                                    elm.removeClass('hideScroll');
                                 });
                            }, 500)
                    });

This is working fine now as expected

[jgw96]

This issue was moved to driftyco/ionic-v1#155

[ionitron-bot[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.