Ionic-framework: If more than one instance of slides in the stack, interactivity on second is broken

[DjulLau]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When on a page that has an <ion-slides> and pushing a new one with another <ion-slides> mouse interactivity is broken (can't drag and swipe properly, slides don't center when release mouse button...)

Expected behavior:
The second <ion-slides> instance should work like the first one

Steps to reproduce:

• Create two simple pages with a simple <ion-slides>
• Navigate from page1 to page 2 using navCtrl.push()
• Drag slides on the page2 slider

Related code:

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):
ordova CLI: 6.3.1
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v7.4.0
Xcode version: Not installed

[jgw96]

Hello, thanks for opening an issue with us. Would you be able to provide a minimal repo or plunker we could use to reproduce this issue?

[DjulLau]

Hello,
Is there a plunker with the lastest ionic from which I can start from ?

[DjulLau]

Here's a plunker in 2.0.1 having the same problem.

• Drag Slides on first page : working
• Go to Page 1 with the right button in the navbar
• Drag Slides on Page 1 : broken :(

[DjulLau]

Hi,

Any progress about this issue ?
This is critical for the product we are working on so any help would be much appreciated...

[rocketfarmsteinar]

This bug is also present in Ionic 2.3.0.

Strangely everything works nicely when in mobile mode (using Chrome dev tools with mobile mode turned on or deploying to Android).

The bug can also be reproduced using tabs layout and placing a slider in each tab page.

[rocketfarmsteinar]

@jgw96 Any updates on this issue would be welcome.

Does anyone have a patch or a workaround for this issue?

[madschristensen]

We also encounter the same problem. Any updates @jgw96 ?

[DjulLau]

For information I've tried the workaround suggested by @kpoconnor in #10101 but it doesn't fix the problem :(
There is also #12166 which seems to be related...
This totally breaks the app we're supposed to ship : what can we do/expect about this bug ?

[kpoconnor]

@DjulLau Unfortunately, the workaround that I found for #10101 and #12166 won't really work in this case, since the workaround I came up with really only forces the slides to realign if they become misaligned as part of the rotation+navigation issue that those tickets talk about. :(

[DjulLau]

@kpoconnor Thanks for the input.
For #10101 I was afraid of that but desperately in need of a solution so I tried anyway :(
For #12166 I think it the same issue as mine as @mj6uc uses a push to "get back" to the home page on page1 (should be a pop)

[kpoconnor]

Not that this helps overmuch, but I discovered that, running with ionic serve, if I refresh the browser after I trigger this bug, I can navigate to as many pages with slides as I want and they work correctly.

[mj6uc]

@DjulLau I could have "pop"ed to that page - but in the app users will navigate by "push"ing around pages and will end up on a previously visited page (with sliders) using push....so push is more accurate use-case in my case. It would not be of help, even if pop worked.

[DjulLau]

@mj6uc I don't have enough context to understand how your app should works but I usually try to avoid scenarios where user could push new components indefinitely to the stack.
Anyway what's important in relation to the bug and to the thread here is that in your example we're not "getting back" to the previous slider as in my plunker (that would work I think) but rather pushing a new component with a new slider.
@kpoconnor That's interesting. I will try to investigate and see if I can understand what's happening...

[kpoconnor]

@DjulLau I wouldn't look too deeply into it, it could be something with my local setup. Also, its a moot point if you see the bug on device.

[DjulLau]

@kpoconnor Actually I cannot reproduce this on my setup (ionic serve on windows 7, FF or Chrome) : bug still occurs after reload.
Didn't test it on device (as my app target OS is Windows/NW.js).

[DjulLau]

After quite a long journey thru the code I think I found the reason and a patch working for me.

On desktops we're in "simulateTouch mode" and in this mode the mousemove event listener is attached to the document instead of the swiper wrapper. This cause the event to be triggered to the each swiper instance even if not visible (when the ionic page is hidden for example) and cause all sort of troubles (some event properties are manipulated...).

So the less hacky patch I found for the moment is, in swiper-event.js, line 53 or so (depending on your version) :

Replace

   if ((s.simulateTouch && !plt.is('ios') && !plt.is('android')) || (s.simulateTouch && !s._supportTouch && plt.is('ios')) || plt.getQueryParam('ionicPlatform')) {
        // mousedown
        plt.registerListener(touchEventsTarget, 'mousedown', function (ev) {
            onTouchStart(s, plt, ev);
        }, { zone: false }, unregs);
        // mousemove
        plt.registerListener(plt.doc(), 'mousemove', function (ev) {
            onTouchMove(s, plt, ev);
        }, { zone: false }, unregs);
        // mouseup
        plt.registerListener(plt.doc(), 'mouseup', function (ev) {
            onTouchEnd(s, plt, ev);
        }, { zone: false }, unregs);
    }

by

    if ((s.simulateTouch && !plt.is('ios') && !plt.is('android')) || (s.simulateTouch && !s._supportTouch && plt.is('ios')) || plt.getQueryParam('ionicPlatform')) {
        // mousedown
        plt.registerListener(touchEventsTarget, 'mousedown', function (ev) {
            onTouchStart(s, plt, ev);
        }, { zone: false }, unregs);
        // mousemove
        plt.registerListener(touchEventsTarget, 'mousemove', function (ev) {
            onTouchMove(s, plt, ev);
        }, { zone: false }, unregs);
        // mouseup
        plt.registerListener(touchEventsTarget, 'mouseup', function (ev) {
            onTouchEnd(s, plt, ev);
        }, { zone: false }, unregs);
        // mouseleave
        plt.registerListener(touchEventsTarget, 'mouseleave', function (ev) {
            onTouchEnd(s, plt, ev);
        }, { zone: false }, unregs);
    }

Of course this may break something else in your app depending on what you're doing but maybe it will help someone in the same situation as mine...

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/208