ion-item-sliding doesn't slide if Chrome Dev Tools is open

[vk2sky]

Short description of the problem:

component doesn't slide in Chrome if Dev Tools are open

What behavior are you expecting?

List element should slide regardless of state of Dev Tools

Steps to reproduce:

1. Create page with the template below
2. With Chrome Dev Tools closed, verify that sliding the SLIDE ME list item to the left reveals clipboard and trash option buttons
3. Open Dev Tools. TEST item can no longer slide

<ion-content>
  <ion-list>
    <ion-item-sliding>
      <ion-item><ion-label>SLIDE ME</ion-label></ion-item>

      <ion-item-options>
        <button><ion-icon name="clipboard"></ion-icon></button>
        <button><ion-icon name="trash"></ion-icon></button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

Other information:
Chrome version 51.0.2704.103 (64-bit)
Works in Firefox 47.0, so perhaps this is a Chrome issue.

Which Ionic Version? 1.x or 2.x
2.0.0.beta.9

Plunker that shows an example of your issue

(not supplied)

Run ionic info from terminal/cmd prompt: (paste output below)
Your system information:

Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0-beta.9
Ionic CLI Version: 2.0.0-beta.30
Ionic App Lib Version: 2.0.0-beta.16
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.5.0
Xcode version: Xcode 7.3.1 Build version 7D1014

[vk2sky]

For what it's worth, I thought that maybe Chrome Dev Tools was hijacking drag events, but this appears not to be the case. For example, the demo page for ng2-dragula (http://valor-software.com/ng2-dragula/) works even when Dev Tools is open.

[jgw96]

Hello, thanks for opening an issue with us! Does it happen only when you are using device emulation? Thanks for using Ionic!

[vk2sky]

Hi @jgw96, sorry for the delay in replying.

I observed tThis problem while running the app in the Chrome browser via the "ionic serve" command.

[jgw96]

No problem! I just tested this with our ionic-conference-app in the latest chrome and it seems to be working for me. Would you mind giving that app a try and see if the sliding items on the first page work for you?

[vk2sky]

Thanks @jgw96 . I've done some more investigation, and reproduced the problem with the ionic-conference-app. Here's the sequence:

1. With Chrome Dev Tools off, start the app, and skip past the intro screen
2. Verify that list items can be swiped to reveal the "Favorite" option. Swipe back to hide the option.
3. Open Chrome Dev Tools.
4. Try swiping a list item again. For me, swipe does not reveal the "Favorite" option.
5. Leaving Dev Tools open, refresh the browser screen, and again skip the intro.
6. Now swipe works as expected.

My updated ionic info:

Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0-beta.9
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.5.0
Xcode version: Xcode 7.3.1 Build version 7D1014

[chandanch]

Hello, Guys even I'm facing the same problem, When I enable the device emulation it doesn't work in chrome

[jgw96]

@vk2sky yep, that is what i expected. We have also been experiencing this and it seems to be a chrome bug related to emulating touch events. I can happily report though, that on the latest chrome canary it seems to be happening less, so it looks like they may be working on this bug. I would recommend opening an issue with the chrome. Thanks for using Ionic! As this is a chrome bug and not an ionic bug i am going to be closing this issue for now.

[manucorporat]

@jgw96 it is a hammer bug, this was a real bug! but I have a fix.

[jgw96]

@manucorporat thanks for taking another look at this!