[iOS 12.2 Beta & Scrolling] Scrolling Freeze Issue with iOS 12.2 Beta

[bryplano]

This is a...

[x] bug report
[ ] feature request

Current behavior:

In certain situations with the iOS 12.2 Beta (since Beta 3 or earlier), it is possible for scrollable areas to become "frozen" (i.e. the user is unable to scroll).

For example, having a scrollable ion-list on a child page behind a LoadingController and navigating to it from the first page of the application (see the example application further down).

This scroll "freeze" persists until some other change is made to the DOM - even simply changing a CSS attribute on related scrolling elements in the Safari Webview Inspector can trigger the scrolling to work again.

This only occurs with the 12.2 Beta, so it may be related to Safari / Webkit changes.

Expected behavior:

Scrolling should work appropriately when navigating from one page to another. In the sample application, scrolling should be enabled and working after being transitioned to the "child" page and once the LoadingController is dismissed.

Sample Repo:

Test app repo

Steps to reproduce:

Important Note: You will need a device running the iOS 12.2 Developer Beta and a Mac running Xcode 10.2 Beta to reproduce the behavior below.

Steps Listed in the Repo

• Clone the sample app and then run the following commands in the root dir:
• npm i
• ionic cordova platform add ios
• ionic cordova build ios
• Open Xcode and run the app on your device (may need to tinker with code signing settings)
• Tap the button on the home screen to transition to the second "child" screen
• Notice the scrolling on the list of names (ion-list) does not function

Other information:

• Issue has been occurring only with the iOS 12.2 Beta; iOS 12.1.4 and earlier versions are unaffected
• Issue is specific to iOS; does not affect Android

ionic info

Ionic:

   ionic (Ionic CLI)  : 4.10.3
   Ionic Framework    : ionic-angular 3.9.3
   @ionic/app-scripts : 3.2.1

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 4 other plugins)

System:

   Android SDK Tools : 26.1.1 
   ios-deploy        : 2.0.0
   NodeJS            : v8.15.1 
   npm               : 6.4.1
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[tlancina]

I think this is a webkit bug, here's a minimal repro: https://gist.github.com/tlancina/694e54d8c357834f6fc0681586cdb460.

Seems like scrolling breaks in 12.2 WKWebView when pointer-events: none affects a scrollable element using -webkit-overflow-scrolling: touch. It unfreezes if you update any CSS property on the element.

EDIT for clarity: the bug is that pointer-events: none is added and then removed, but scrolling remains frozen.

[Baadier-Sydow]

I'm going to add another issue that was picked up by one our testers as it may be linked . We have a feature that opens an external site in an inappbrowser and then returns back to the application.

We started with the Ionic side menu starter and according to the testers the menu intermittently stops responding to the press to open it ie the menu does not slide open when we get focus back from the inappbrowser.

This was working prior to iOS 12.2.

[bryplano]

The underlying issue that was causing the scrolling problem has been fixed by Apple as part of the iOS 12.2 Beta 6 that was released earlier this week.

@Baadier-Sydow, I recommend checking your app / issue with the latest Beta to see if the issue is resolved :)

[Baadier-Sydow]

@bryplano Thanks! We'll have a look and get back with feedback.

[dfiggtns]

I'm getting the same issue. I've updated our test iphone 8 to the latest 12.2 and have the same issue with scrolling. On our other apple devices that are on previous ios versions, the scrolling works fine.

[BumbleeLin]

@dfiggtns try this fix - ionic-team/ionic-v3#984

[dfiggtns]

@BumbleeLin unfortunately, I don't have any code that enables/disables scrolling or an app-root.ts (I have an app-component.ts, though), so I have nowhere to put that code.

[BumbleeLin]

@dfiggtns that's fine. Look in node_modules>ionic-angular>es2015>components>app

You should find app-root.js. Look for this method > _disableScroll

[dfiggtns]

Thank @BumbleeLin. Should I copy that file to src/components/app/app-root.ts as the fix shows or just change it in situ?

[BumbleeLin]

@dfiggtns I think don't copy the entire file. Your method should look like this when done or you can copy and replace the method with the below:

/**
* @param {?} shouldDisableScroll
* @return {?}
/
_disableScroll(shouldDisableScroll) {
if (shouldDisableScroll) {
this.stopScroll().then(() => {
this._tmr = this._plt.timeout(() => {
(void 0) / console.debug /;
this.setElementClass('disable-scroll', true);
}, 32);
});
}
else {
let /* @type {?} / plugin = this._stopScrollPlugin;
if (plugin && plugin.cancel) {
plugin.cancel();
}
clearTimeout(this._tmr);
(void 0) / console.debug */;
this.setElementClass('disable-scroll', false);

        /**
         * On iOS 12.2 there is a bug that
         * prevents pointer-events from being
         * re-enabled when removing the
         * disable-scroll class.
         */
        this.setElementStyle('z-index', '1');

        setTimeout(() => {
            this.setElementStyle('z-index', null); 
        }, 32);
    }
}

[dfiggtns]

@BumbleeLin, I've applied the change in situ and also copied the file the the src folder, but neither have made a difference. The scrolling is still disabled.

I've found that I can re-enable scolling by manually pulling the page down, even by just one pixel. Then the scrolling works normally.

I've also tried running the same code in an 11.4 simulator in xcode and the scrolling works first time.

This is a very curious bug that I just can't seem to pin-point, so any other suggestions would be very gratefully received at this point.

[BumbleeLin]

@dfiggtns mmmmm curious indeed, I don't think you should copy the actual file across to src folder.

1. What is situ?
2. Remove the file you just copied to src folder
3. Do you have this directory : node_modules>ionic-angular>es2015>components>app ?

[dfiggtns]

@BumbleeLin, in-situ means where it was originally situated i.e. at node_modules>ionic-angular>es2015>components>app

Copying it was just desperation to find a solution.

I've just tried another search for the problem, but there doesn't seem to be many people who have had this problem yet, so I guess I'll have to keep plugging away.

[BumbleeLin]

@dfiggtns that's cool :). I could try to help you offline.

After applying the code to situ maybe do a rebuild of the ios project -- ionic cordova build ios

[dfiggtns]

@BumbleeLin well, I've tracked it down to a function in the cordova-plugin-ionic-webview plugin:

#pragma mark WKScriptMessageHandler implementation

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
    if ([message.name isEqualToString:CDV_BRIDGE_NAME]) {
        [self handleCordovaMessage: message];
    } else if ([message.name isEqualToString:CDV_IONIC_STOP_SCROLL]) {
        /*[self handleStopScroll];*/
    }
}

which is being passed a value of 'stopScroll' in the message parm. I'm not sure what's passing that value, but when I comment out self handleStopScroll as above, the scrolling starts working normally.

The page has an async call to the backend api to get the data to display in an ion-list, so it may be something in ios 12.2 that detects there's not enough data at page load to warrant scrolling, so it turns it off, but there's nothing that turns it back on when the data finally arrives.

I've tried using the scroll="true" option on the ion-content tag on the page, but it makes no difference. So I guess, if there's no other ionic option to force scrolling to be on, then I'll have to stick with my hack above and hope they fix it in the next ios version.

[phpfs]

@dfiggtns This describes my issue perfectly - I am also loading data which afterwards populates an ion-list element.
It would be great to create a official patch though...

[dfiggtns]

@phpfs, I eventually ended up spending hours updating all the plugins to the latest versions (including loads of trial and error getting them to play nicely with each other), which seemed to solve the scrolling issue without having to use the scroll option or commenting out the call to the stop scroll function.

Just thought you might like to know my eventual solution.

[Baadier-Sydow]

@dfiggtns would you be able to share your ionic info and plugin list please?

[dfiggtns]

@Baadier-Sydow, a correction to my previous post. It appears I was fooled by the plugin updates and have subsequently found that my first instincts were right. My hack of commenting out the handleStopScroll line is the only way to solve the scrolling freeze issue.

Let's hope someone looks into why this is happening and solves it in the next release of cordova-plugin-ionic-webview.

[phpfs]

@dfiggtns Easy fix that worked for me - update ionic-angular to latest nightly containing the discussed fix:
Simply run npm i ionic-angular@3.9.4-201903121725 in your project's directory :)

[dfiggtns]

@phpfs, ahah, that works. Thanks for spotting that. Much better than trying to go live with a hack.

[filippodicostanzo]

I've tried with rebuild and re-added platform but doesn't work. :|
If is in page there is an event the scroll it work otherwise doesnt' work.

Any solution?

[dfiggtns]

@filippodicostanzo, have you tried the nightly build mentioned by @phpfs?

Even though my hacks above solve the problem, so does the updated plugin and it's better to use the official solution than one of your own that'll just be overwritten the next time you update the plugin.

[filippodicostanzo]

Yes, i've tried all solution mentioned by @phpfs but doesn't work.

I've tried also a new blank project with sidemenu and the problem is when i change the setroot(). The new page called by setRoot is freeze. But if i change the setroot with push the scroll works correctly.

[dfiggtns]

@filippodicostanzo, yes that's another quirk I found I had to do to get my app to work with ios 12.2 - change setRoot calls to use push.

[Bkhadija]

@YaroslavG , In fact I didn't find a real solution. All I did is whenever I use 'disable-scroll' class I set any css property (exp -webkit-overflow-scrolling to 'auto'), and when I remove it I reset the css property (-webkit-overflow-scrolling to 'touch') cause changing css enable the scroll again.
It's a stupid thing to do but it does the work.
Please share if you ever found a better workaround.
BTW: the bug is resolved in iOS 13

[YaroslavG]

@Bkhadija, can you show example code? I want to test it myself
thanks

[YaroslavG]

any news?

[Bkhadija]

@YaroslavG Here is the last thing I did and it worked
code example in app.component.ts:
disableAppScrolling(){
//add disable-scroll to app-root class name}
enableAppScroll(){
//delete disable-scroll class from app-root class name then add:
this.elementRef.nativeElement('z-index', '1');
setTimeout(() => {
this.elementRef.nativeElement('z-index', null);
}, 32);
}

[YabinSong]

@Bkhadija the code from last comment seems incomplete?

[Bkhadija]

do you use disable-scroll class? if yes, then just after removing that class add :
this.elementRef.nativeElement('z-index', '1');
setTimeout(() => {
this.elementRef.nativeElement('z-index', null);
}, 32);
ofcourse 'this.elementRef.nativeElement' assuming that this === App.
if it's not the case (means you don't use disable-scroll class), please share with us the issue details.

[YaroslavG]

@Bkhadija , I thought it could be solved somehow at the level of webview..

[YabinSong]

@Bkhadija do you mean using it inside app.component.ts? I don't. I do see that method inside node_modules/ionic-angular/es2015/components/app/app-root.js. If that's where you want me to remove it? Another thing I want to mention is, my native app is still using UIWebView, not WKWebView...

[Bkhadija]

@YaroslavG I have no idea if it have been solved or no at webview level.
@YabinSong for me, I aleardy set it in node_modules/ionic-angular/es2015/components/app/app-root.js but the problem was always there. So, I did it in app.components.ts file and it worked.

[gogulnathv]

@phpfs You saved my day and I owe you.
for others,
I had ionic-angular@3.9.2
updating to ionic-angular@3.9.4-201903121725 or to latest seems to fix the issue
npm install ionic-angular@3.9.4-201903121725

[hanoj-budime]

same issue while scrolling in ionic 4 inappbrowser

how to fix it ?

[Crazy-kun]

Same issue in ionic 5 react PWA.

[faraz9x]

For me the fix was adding an extra text field and then focus() and blur() it immediately on load.
$(".scrollLockOpener").focus();
$(".scrollLockOpener").blur();
or we can do it in one line I believe as well.
This was because I noticed that scroll lock was removed when I focus on a textfield, so I created one and set its position absolute with left -100%

[conde2]

Me too. Same issue in ionic 5 react PWA. iOS 12

[kartiksolanki]

Facing this same issue with Ionic 4 and iOS 14. adding pointer-events as auto in global resolves it but thats a patch.

[faraz9x]

@kartiksolanki and @conde2

For me the fix was adding an extra text field and then focus() and blur() it immediately on load.
$(".scrollLockOpener").focus();
$(".scrollLockOpener").blur();
or we can do it in one line I believe as well.
This was because I noticed that scroll lock was removed when I focus on a textfield, so I created one and set its position absolute with left -100%

[StevieWag]

We are facing the same issue with Ionic 5 but only on iOS 14

@kartiksolanki where did you add the pointer-events in the application?

[StevieWag]

A workaround which worked for us was to load component data onInit with a short timeOut (not really cool but didn't find another solution so far) base on the check if the device runs on iOS 14

ngOnInit() {
    const osMajor = this.device.majorOs;
    if (osMajor && this.device.deviceInfo && this.device.deviceInfo.operatingSystem === 'ios' && osMajor >= 14) {
      setTimeout(() => {
        this.showContent = true;
      }, 500);
    } else {
      this.showContent = true;
    }
  }

[kartiksolanki]

@StevieWag : I added the below code in "global.scss" and it is working.

.ios ion-content {
   pointer-events: auto;
}

[rafaellop]

In my case scrolling has been freezing if I opened an action-sheet component. The tip with the pointer-events property allowed me to quickly fix that by just removing the pointer-events: none from the .action-sheet-open,.action-sheet-open.modal-open .modal selector in the ionic.css. I still use the ionic v1, but maybe this can be some hint. It started to happen since iOS 14 and wkwebview. On iOS 13 and wkwebview it worked properly so I suppose the issue is in the wkwebview itself. I hope this helps someone like me who needed to release a quick fix to users.

[dpetraz]

Me too. Same issue in ionic 5 react PWA. iOS 12

same here but now ionic 5 on iOS 14.2

[joamartico]

I'm having the same issue. What's the better solution for now?

[faraz9x]

I'm having the same issue. What's the better solution for now?
Depending upon what framework you are using, there are diff solutions mentioned above, but one that will work always I believe is this. The scroll unfreezes when we focus a text field hence we can add a textfield hidden through positioning and using focus() and blur() on it
#984 (comment)

[joamartico]

Thanks for the answer. I'm using the JavaScript vanilla Ionic in Next.js.
When should I focus the hidden text field? How can I know when it's going to freeze?

[faraz9x]

Thanks for the answer. I'm using the JavaScript vanilla Ionic in Next.js.
When should I focus the hidden text field? How can I know when it's going to freeze?

---

You can find the several options to run a code on load of the app, onload/deviceready event/ in the main controller
You just have to do it the moment app has loaded. Let me know if you need more help, havent done ionic since long but can try to help

[appledev27]

Try this one,
Finally, we got the perfect solution.

1. window.scrollBy(0, 100); // Scroll 100px downwards
2. window.scrollBy(100, 0); // Scroll 100px to the right