Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
bryplano opened this issue Mar 7, 2019 · 48 comments

Comments

Projects
None yet
@bryplano
Copy link

commented Mar 7, 2019

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

This comment has been minimized.

Copy link
Member

commented Mar 7, 2019

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

This comment has been minimized.

Copy link

commented Mar 8, 2019

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.

@IonicProSupport IonicProSupport changed the title [iOS 12.2 Beta & Scrolling] Scrolling Freeze Issue after Navigation with iOS 12.2 Beta [iOS 12.2 Beta & Scrolling] Scrolling Freeze Issue with iOS 12.2 Beta Mar 8, 2019

@bryplano

This comment has been minimized.

Copy link
Author

commented Mar 20, 2019

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 :)

@bryplano bryplano closed this Mar 20, 2019

@Baadier-Sydow

This comment has been minimized.

Copy link

commented Mar 20, 2019

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

@dfiggtns

This comment has been minimized.

Copy link

commented Mar 29, 2019

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

This comment has been minimized.

Copy link

commented Mar 29, 2019

@dfiggtns

This comment has been minimized.

Copy link

commented Mar 29, 2019

@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

This comment has been minimized.

Copy link

commented Apr 1, 2019

@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

This comment has been minimized.

Copy link

commented Apr 1, 2019

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

This comment has been minimized.

Copy link

commented Apr 1, 2019

@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

This comment has been minimized.

Copy link

commented Apr 1, 2019

@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

This comment has been minimized.

Copy link

commented Apr 1, 2019

@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

This comment has been minimized.

Copy link

commented Apr 1, 2019

@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

This comment has been minimized.

Copy link

commented Apr 1, 2019

@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

This comment has been minimized.

Copy link

commented Apr 1, 2019

@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

This comment has been minimized.

Copy link

commented Apr 1, 2019

@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

This comment has been minimized.

Copy link

commented Apr 2, 2019

@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

This comment has been minimized.

Copy link

commented Apr 2, 2019

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

@dfiggtns

This comment has been minimized.

Copy link

commented Apr 2, 2019

@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

This comment has been minimized.

Copy link

commented Apr 3, 2019

@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

This comment has been minimized.

Copy link

commented Apr 3, 2019

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

@filippodicostanzo

This comment has been minimized.

Copy link

commented Apr 4, 2019

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

This comment has been minimized.

Copy link

commented Apr 5, 2019

@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

This comment has been minimized.

Copy link

commented Apr 5, 2019

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

This comment has been minimized.

Copy link

commented Apr 5, 2019

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

@filippodicostanzo

This comment has been minimized.

Copy link

commented Apr 5, 2019

@dfiggtns what function did you replace setRoot with?

@BumbleeLin

This comment has been minimized.

Copy link

commented Apr 5, 2019

@filippodicostanzo have you tried to use this - ionic-team/ionic-v3#984

@dfiggtns

This comment has been minimized.

Copy link

commented Apr 5, 2019

@filippodicostanzo, I used push.

@filippodicostanzo

This comment has been minimized.

Copy link

commented Apr 5, 2019

@BumbleeLin yes. I update to specific version of ionic with update ionic-angular@3.9.4-201903121725
but doesn't work.

I checked to see if the file had changed and in node_modules/ionic-angular/es2015/components/app/app-root.js. and i find these lines

/**
         * 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);
    }
}

but doesn't work.

@filippodicostanzo

This comment has been minimized.

Copy link

commented Apr 5, 2019

@filippodicostanzo, I used push.

but how to change the back button with menu button?

@filippodicostanzo

This comment has been minimized.

Copy link

commented Apr 5, 2019

I think that is the problem of refresh content of page. Because if the page contains a google maps or a loading controller the problem doesn't appear.

All of my app have this bug and all app is updated at the latest version of ionic 3

@dfiggtns

This comment has been minimized.

Copy link

commented Apr 5, 2019

@filippodicostanzo, have you tried my hack in the cordova-plugin-ionic-webview plugin?

@filippodicostanzo

This comment has been minimized.

Copy link

commented Apr 5, 2019

@dfiggtns

I've tried two workaround on cordova-plugin-ionic-webview

This one:

a) [wkWebView evaluateJavaScript:@"window.IonicStopScroll.fire()" completionHandler:nil];

To -

b) [wkWebView evaluateJavaScript:@"window.IonicStopScroll.cancel()" completionHandler:nil];

and This one

- (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];*/
    }
}

but doesn't work

@fabmesto

This comment has been minimized.

Copy link

commented Apr 5, 2019

@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 :)

That works. Thanks

@filippodicostanzo

This comment has been minimized.

Copy link

commented Apr 5, 2019

Anyone have possibility to test the issue on real device with iOS 12.2?
Because is a very bad issue and until now i can't find a solution

@dfiggtns

This comment has been minimized.

Copy link

commented Apr 8, 2019

@filippodicostanzo, the solution by @phpfs using the nightly release of the plugin worked for me on real devices, so we are rolling it out to live.

@filippodicostanzo

This comment has been minimized.

Copy link

commented Apr 8, 2019

@dfiggtns i run this command after ionic start project
npm i ionic-angular@3.9.4-201903121725
ionic cordova install cordova-plugin-ionic-webview@latest
but doesn't work

@kapilSoni101

This comment has been minimized.

Copy link

commented Apr 13, 2019

Sir in my case scrollimg is not working only in the iphone7 device screen are freeze but in another iphone it will worked anybody have an idea for this issue?

@aspoonemore

This comment has been minimized.

Copy link

commented Apr 14, 2019

@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 :)

This fixed my issue as well. Thank you!

@kapilSoni101

This comment has been minimized.

Copy link

commented Apr 15, 2019

@aspoonemore, sir it is working in our above mentioned scenario after install above command?

@JoeMeeks

This comment has been minimized.

Copy link

commented Apr 16, 2019

This totally solves it for me. Add this to your scss:

ion-app.platform-ios12 ion-content { pointer-events: auto; /*fix scroll lock on ios12.2*/ }
@kapilSoni101

This comment has been minimized.

Copy link

commented Apr 16, 2019

@JoeMeeks - sir are u also install above plugin as well as add css or only add css in app.scc for fix scroll issue?

@JoeMeeks

This comment has been minimized.

Copy link

commented Apr 16, 2019

@JoeMeeks - sir are u also install above plugin as well as add css or only add css in app.scc for fix scroll issue?

@kapilSoni101 I only added the app.scss fix. I am still on ionic-angular 3.9.2.

@kapilSoni101

This comment has been minimized.

Copy link

commented Apr 17, 2019

@JoeMeeks sir i have tried and also worked for me but sir generate bouncing issue only where we have to used the segment and list is show in such case list is scroll as well as bouncing with segment, do you have idea what the problem
i have also used for remove bouncing effect via below css in the app.scss

.content-ios:not([no-bounce])>.scroll-content::before { bottom: 0; }

@ThonyFD ThonyFD referenced this issue Apr 30, 2019

Closed

White screen first load (Ionic 3 - iOS) #169

1 of 5 tasks complete
@jameshuimin

This comment has been minimized.

Copy link

commented Apr 30, 2019

2019.4.30 "ionic-angular": "^3.9.5", the bug The bug is still in ionic。When I run in the web(ionic cordova build browser ), page will be stuck for 1-2 seconds, And then touch it again work。

@huangjianhuiGIT

This comment has been minimized.

Copy link

commented Apr 30, 2019

Hi All,I have the same issue and how to fix ?please help me with the code,thanks

@JianhuisHuang

This comment has been minimized.

Copy link

commented Apr 30, 2019

This totally solves it for me. Add this to your scss:

ion-app.platform-ios12 ion-content { pointer-events: auto; /*fix scroll lock on ios12.2*/ }

@JoeMeeks thanks, this work for me

@jameshuimin

This comment has been minimized.

Copy link

commented May 5, 2019

This totally solves it for me. Add this to your scss:

ion-app.platform-ios12 ion-content { pointer-events: auto; /*fix scroll lock on ios12.2*/ }

@JoeMeeks thanks, this work for me
Are you adding it to app.scss? What is your ionic-angular version

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.