ionic-framework: Scrolling occasionally freezes after tapping on screen

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. scrollfreeze

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:

Scroll the page up and down
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.
Content will eventually freeze in place.
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

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 22 (11 by maintainers)

Most upvoted comments

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.

yazanExalt on Aug 23, 2016

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.

setting !important to overflow-scroll

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

Added one more class called hideScroll

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

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

saurabhudaniya200 on Jan 6, 2017

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…

SebastianSchirmer on Oct 4, 2016