@joshstrange seems overkill…better solution would be to just reapply .ion-page-hidden at the end of the gesture as @Kadinvanvalin suggested in the bug report.

I can confirm this issue. In my case, I am using the cordova-plugin-camera-preview plugin on a subpage and have to make the whole content transparent. Everything works fine until I use swipe to go back.

The behaviour is very weird:

• The sub-page becomes transparent, showing the parent page.
• “Scrolling” gets applied to the parent page, the sub-page does not move
• We have a drawing are on the sub-page, touch events still get registered there, but they also scroll the parent page.
• Using swipe-back fixes the issue (by going back to the parent page).

We are currently migrating our app to Ionic 4 and this branch is not public yet. But if it would help you in reproducing the error, I can try to make it public.

Here is a video: https://streamable.com/tt8p9

EDIT: My temporary solution is to simply disable swipe to go back in the whole application. Ideally I would like to only disable it on some pages, but I couldn’t find any docs for it. Is there a way to do that?

@joshstrange
Your effort deserves to be rewarded 🎖

@dansiemens 🤦‍♂ Yeah it probably would… Ok, well I’m rushing to ship this app in the next 30min but I will play around with a fix that JUST does that later. Thank you, I somehow missed that reading through everything.

@hiepxanh Ok I’ve got a REALLY gross work around that involves patching @ionic/angular. It’s not pretty but I think it covers all the bases. What I DON’T know is if it breaks anything else. I haven’t scripted it yet but it shouldn’t be hard to script as a hook.

What I’m doing is 2 things.

1. Making a an edit to StackController.startBackTransition() so that it doesn’t allow you to partially drag, once it detects a swipe it will just go back. You still get the animation, you just don’t get it “following/tied to” your finger.
2. Making an edit to StackController.endBackTransition so that shouldComplete is always true. This is needed because if you don’t do this and hold your finger on the screen for the duration of the animation then it will look like you went back but technically you are still on the page you “left” and you have to swipe back a second time.

I do not like or advocate something like this normally, ideally we would at a minimum get the functionality I hacked in as an option like swipeType="instant" that we could put on ion-router-outlet but I’m terrible at naming so I’m sure someone else come up a better name. I make no promises that this will work on versions other than @ionic/angular@4.6.0 but feel free to try to make similar changes to other versions.

The hack

In ./node_modules/@ionic/angular/dist/fesm5.js add the following lines at the bottom of the file right above the export { .....} line. You could instead edit them in the file instead of overwriting them but I found this to be cleaner and more obvious as to what I’m doing.

// Start monkey patching
StackController.prototype.startBackTransition = function () {
    return __awaiter(this, void 0, void 0, function () {
        var leavingView, views, enteringView_1;
        var _this = this;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    leavingView = this.activeView;
                    if (!leavingView) return [3 /*break*/, 2];
                    views = this.getStack(leavingView.stackId);
                    enteringView_1 = views[views.length - 2];
                    enteringView_1.ref.changeDetectorRef.reattach();
                    return [4 /*yield*/, this.wait((/**
                     * @return {?}
                     */
                    function () {
                        return _this.transition(enteringView_1, // entering view
                            leavingView, // leaving view
                            'back', true, false); // <---------- EDIT 1, used to be "'back', true, true);"
                    }))];
                case 1:
                    _a.sent();
                    _a.label = 2;
                case 2: return [2 /*return*/];
            }
        });
    });
};

StackController.prototype.endBackTransition = function (shouldComplete) {
    shouldComplete = true; // <---------- EDIT 2, I added this line
    if (shouldComplete) {
        this.skipTransition = true;
        this.pop(1);
    }
};
// End monkey patching

To be fair… It’s not really “monkey patching” as I’m pretty sure that is something you do at runtime but I wasn’t able to figure out a way to do true “monkey patching” but maybe someone smarter can figure it out so we don’t have to edit node_modules. Also I know my second edit could have been done about 3 different ways but this was the cleanest IMHO and is obviously what I changed (vs just removing the if)

Like I said this should be easy enough to script into an after_prepare hook or something like that…

Edit: Well I feel like a moron, ANOTHER fix that requires NO PATCHING is to just set animated="false" on the ion-router-outlet. My patch will keep the animation (just not let you stop it) so I think I’ll still ship with my “hack” but for those who don’t want to hack it I understand. I might see if I can’t just fork @ionic/angular and add a draggable input to the directive that will be used to do what my hack does. That way everyone could just set it to false to avoid this issue.

Obviously the best of all worlds would be to fix the actual issue here so we could drag it and cancel it and not have these problems but… well someone smarter is going to have to do that, I’m tapped out.

Edit 2: Ok here is the file to patch it: https://gist.github.com/joshstrange/23546d07c9294671200d3b5f4c85c934 and you just need to add "prepare": "node scripts/patch-ionic-angular.js", to the scripts section in package.json (update the path to wherever you want to save the patch-ionic-angular.js file