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.