ion-item-sliding class active-options-left/right is not always applied leading into buttons not being rendered

[masimplo]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 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:
Sliding ion-options sometimes does not show buttons but empty space. Sliding the item back and forth a bit shows the buttons.

Expected behavior:
Sliding ion-options should always display the buttons underneath.

Steps to reproduce:
My exact case is a virtual scroll list that renders custom components that wrap an ion-item-sliding but should be reproducible in simpler examples.
In a list rendering ion-item-sliding slide the item left or right in a slow device or using chrome dev tools CPU throttling (seems to be a race condition of some kind).
Some times buttons will appear, some times a white area will appear instead of the buttons until you
nudge the item again a bit.

When buttons appear DOM looks like

When buttons do not appear DOM looks like:

Notice that in the second case the class active-options-left is missing, although active-slide is present

Other information:
Have tested this in 3.1.0, 3.3.0 and latest nightly and consistently happens across all.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.3.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.3.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.3.0
    @ionic/cli-plugin-ionic-angular : 1.3.0
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.3.0-201706052245

System:

    Node       : v7.10.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : not installed
    ios-sim    : not installed

Note: a similar issue had been filed for an older version of Ionic but was closed due to lack of reporter feedback. I have commented both on the closed issue, but opened a new updated issue, so this doesn't fall between the cracks.

[jgw96]

Ahh, interesting find! Unfortunately, i have not been able to reproduce this issue, would you mind sharing a minimal repo we could use to reproduce this?

[masimplo]

I will give it a try, but not sure I will be able to make a repo as complex as the actual case.

Interesting fact, in my repo I see these warning in the console when sliding an item with x20 CPU slowdown:

[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive.
item-sliding-gesture.js:90 

Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
ItemSlidingGesture.onDragEnd @ item-sliding-gesture.js:90
PanGesture.pointerUp @ pan-gesture.js:141
PointerEvents.handleTouchEnd @ pointer-events.js:86
platform.js:633 

[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive.
pan-gesture.js:113 [Violation] Handling of 'touchmove' input event was delayed for 110 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.
item-sliding-gesture.js:90 

Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
ItemSlidingGesture.onDragEnd @ item-sliding-gesture.js:90
PanGesture.pointerUp @ pan-gesture.js:141
PointerEvents.handleTouchEnd @ pointer-events.js:86
platform.js:633 

[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive.

Whereas in a simplistic repo trying to reproduce this I only see:

[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive.

If I remove the CPU slowdown both repos show only the violation warning once per slide. Does this help at all?

[masimplo]

OK I managed to reproduce it in the ionic repo tests.
I created a branch on my fork with a few small modifications to the sliding-item virtual scroll test until the issue was reproduced.
Take a look here
https://github.com/masimplo/ionic/tree/feature/virtualscroll-sliding-item
or just get the patch
https://github.com/masimplo/ionic/commit/ac960e369d8d7cfc42e0e5d81b02f520f52e8d72.patch

I also made a video demonstrating the issue in this repo

[masimplo]

@jgw96 are you still not able to reproduce this or just didn't get the chance to update this issue?

[jgw96]

Hey @masimplo , Sorry have been very busy with getting the latest release ready (: Would you be able to try the latest nightly and see if you can still reproduce this issue? It seems to be working fine for me (:

[masimplo]

@jgw96 I know you guys are all over the place these days, but are doing a great job on the latest releases!

Unfortunately, the issue is still happening even in nightly. Don't understand how you are not able to reproduce it. I have tried the repo in 3-4 different machines (and a bunch of phones) and is happening every single time. Did you try to enable CPU throttling in chrome as in faster machines is harder to reproduce without it.

I updated the branch of my ionic-fork with the latest version from master and made a little screencast demonstrating the issue. Please have a look again.
Fork to clone and try: https://github.com/masimplo/ionic/tree/feature/virtualscroll-sliding-item
zip here

To run the example test run the sliding-item virtual scroll tests as usual gulp e2e.watch --folder virtual-scroll/sliding-item

and here is the screencast

[wundo]

@manucorporat this issue is happening on Ionic 2.x can we expect a fix for it as well?

[fccity]

it works after i use this style in .scss file:
ion-item-sliding.active-slide ion-item-options[side=left] {
visibility: visible;
}

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.