iOS 12.2 Scrolling issues

[asa47]

Short description of the problem:

There is a bug in iOS 12.2 that breaks the scrolling on the device, as if the scrollable area becomes frozen. This scroll freeze persists until some other change is made to the DOM.

Any suggestion on what we should do to fix the issue on ionic1 applications?

What behavior are you expecting?

Scrolling should work on scrollable area.

Other information: The issue has been fixed in ionic-angular 3.9.5 (ionic-v3) Patch for iOS 12.2 scrolling bug on ionic-angular 3.9.5

Which Ionic Version? 1.x

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

Ionic:

   ionic (Ionic CLI) : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework   : ionic1 1.2.1
   @ionic/v1-toolkit : 1.0.12

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : ios 4.4.0
   Cordova Plugins       : cordova-plugin-ionic-webview 2.3.2, (and 16 other plugins)

System:

   ios-deploy : 1.9.2
   NodeJS     : v11.1.0 (/usr/local/bin/node)
   npm        : 6.4.1
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61

[ronaldso55]

Facing the same issue here. Did you manage to find a workaround @asa47 ?

[asa47]

@ronaldso55 Yes, inside your ionic.bundle.js, look for the SlideDrag.prototype.end function, and modify the ionic.requestAnimationFrame callback method with the following:

ionic.requestAnimationFrame(function() {
        if (restingPoint === 0) {

          // Fix iOS 12.2 scrolling issue
          if(!(self && self._currentDrag && self._currentDrag.content)){ 
            return;
          }

          self._currentDrag.content.style[ionic.CSS.TRANSFORM] = '';
          var buttons = self._currentDrag.buttons;
.
.
.

Lastly use the following css:

/* Force all the ionic elements to be scrollable, in order to fix iOS 12.2 scroll bug*/
ion-view { pointer-events: auto;}
ion-scroll { pointer-events: auto;}
ion-modal-view { pointer-events: auto;}
ion-popover-view { pointer-events: auto;}
/* Disable the scroll of the main view elements if the modal or the popver are being shown*/
body.modal-open ion-nav-view, body.modal-open ion-nav-view ion-content, body.modal-open ion-nav-view ion-view{
    overflow: hidden!important;
}
body.popover-open ion-nav-view, body.popover-open ion-nav-view ion-content, body.popover-open ion-nav-view ion-view{
    overflow: hidden!important;
}
body.popup-open ion-nav-view, body.popup-open ion-nav-view ion-content, body.popup-open ion-nav-view ion-view{
    overflow: hidden!important;
}
body.modal-open ion-nav-view ion-view ion-scroll, body.popover-open ion-nav-view ion-view ion-scroll, body.popup-open ion-nav-view ion-view ion-scroll{
    pointer-events: none!important;
    overflow: hidden!important;
}

[ronaldso55]

Thanks @asa47! It worked like a charm. Much appreciated.