Slidebox swipe sensitivity too high, vertical scroll + tap-hold extremely poor in Android 4.4.4

[marcsyp]

I have scrollable content in each slide of an Ionic slide-box.

Everything worked perfectly, great user experience until I updated my Galaxy S5 from 4.4.2 to 4.4.4 this morning. Now the UX is an absolute nightmare. Scrollable content inside a slidebox is very difficult to work with. Side to side swiping sensitivity is super super high and prevents vertical scrolling unless absolutely perfectly vertical.

Tap-hold gestures are also really difficult to engage (again due to the side to side swipe sensitivity).

I have noticed this on my wife's Nexus 5 as well (which has always been running 4.4.4).

I am going to need to find a solution to this ASAP, since my Galaxy S5 is my primary demo device and it is a total train-wreck to work with now.

I recently updated to Ionic beta13, no change. As in, a complete app UX fail, an embarrassment to have out in the wild. :(

I also uninstalled the Chrome update that came with Android 4.4.4 (37->35) in the hopes that the WebView would be downgraded to a previous version, no luck.

I'm wondering if there is something specific about my HTML setup, or what else I could provide to get at the issue. I'm surprised I haven't seen more activity on this issue, because it is making my previously smooth app completely useless. Obviously I'm a bit exasperated. Anyway, it leads me to believe that it is an isolated problem, but I don't know where to start.

Attached is an HTML template where this is happening to me. Any thoughts greatly appreciated.

    <ion-view title="LOVE.">
    <ion-nav-buttons side="left">
        <button ng-if="activeSearchSlide == 2" class="button no-animation button-icon icon ion-ios7-arrow-back" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" ng-click="clearSearch()">
        </button>   
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
        <button class="button no-animation button-icon icon ion-ios7-gear" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); float: left;" on-tap="gotoSettings()" on-hold="holdMe()">
        </button>
        <button class="button no-animation button-icon icon ion-ios7-paperplane" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" on-tap="sendFeedback()" on-hold="holdMe()">
        </button>
    </ion-nav-buttons>
    <ion-content has-header="true" >  
        <ion-slide-box does-continue="false" auto-play="false" active-slide="activeSearchSlide" on-slide-changed="slideChanged(index)">

            <ion-slide>
                <div>

                    <label class="tagLabel" on-tap="clickTag()" on-hold="tagMenu($index, tag)" ng-repeat="tag in templates.categories track by $index" style="{{tag.checked | myTagStyle}}"> 
                        <p>{{tag.name}}<span ng-show="!tag.active">*</span><span class="searchCount">{{tag.bundleCount}}</span></p>
                    </label>

                    <form ng-submit="addTag(newTagText)">
                        <div>
                        <div style="border-left: none; border-top: none; border-bottom: none; border-right: 40px solid #f8f8f8">
                            <input type="text" id="inputText" ng-model="newTagText" placeholder="new tag category...">
                        </div>
                        </div>
                    </form>
                </div>
                <br/>
                <br/>
                <br/>
                <br/>
            </ion-slide>
            <ion-slide>
                <div ng-if="!somethingSelected" >
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <p style="font-size:45pt;color:#DDD;">
                ???
                </p>
                </div>   
                <div>
                    <div ng-repeat="tag in templates.categories track by $index" ng-show="tag.checked" class="check-element animate-show" >
                            <label class="tagLabel" on-tap="clickTag()" on-hold="tagMenu($index, tag)" style="{{tag.checked | myTagStyle}}">                            
                                <p>{{tag.name}}<span ng-show="!tag.active">*</span><span class="searchCount">{{tag.bundleCount}}</span></p>
                            </label>
                            <label class="tagLabel" on-tap="clickSubTag($parent)" on-hold="subTagMenu($index, item)" ng-repeat="item in tag.items track by $index" style="{{item.checked | myTagletStyle}}" >

                                <p><span style='display:inline-block;'>&nbsp;&nbsp;</span>{{item.name}}<span ng-show="!item.active">*</span><span class="searchCount">{{item.bundleCount}}</span></p>
                            </label>
                        <form ng-submit="addSubTag()">
                            <div>
                                <div>
                                    <input type="text" class="subtagTextInput" id="inputText" placeholder="new {{tag.name}} taglet..." ng-model="inputText">
                                </div> 
                            </div>    
                        </form>
                        <br/>
                    </div> 
                </div>
                <br/>
                <br/>
                <br/>
                <br/>
            </ion-slide>
            <ion-slide style="padding-left: 3px; padding-right: 3px;">

                            <h1>{{searchString}}</h1>

                            <div ng-repeat="bundle in searchResults track by $index | orderBy:attributes.timestamp:reverse">
                                <div on-tap="viewBundle($index)" on-hold="openBundleModal($index, bundle)" style="background-image: url('{{bundle.firstThumb}}');" class="item {{bundle.attributes.tagged | paintUntagged}}">
                                    <div class="bundleCount"><p>{{bundle.URLcount}}</p></div>
                                </div>
                            </div>
            </ion-slide>
        </ion-slide-box>
    </ion-content>
    <div>
        <button ng-if="locked && overLimit && onSearchPage" class="button button-energized inAppPurchase" ng-click="unlockApp()">{{searchLimit}}/{{totalBundles}}</button>
    </div>

[dbaq]

@Marc, I can confirm this issue.

I have no time to write a codepen but put a simple ion refresher inside a slide box and you can reproduce it. It is also doing that on my nexus 5 android 4.4. Note: as far as I know I haven't noticed this issue on iOS (with the exact same code)

[marcsyp]

@dbaq, thanks for confirming. I thought I was going crazy over here, surprised that very few people are talking about this.

I can also confirm that my code works fine in iOS 7.1 and Android 4.4.2, it's only a problem with the 4.4.4 update. Unfortunately, this update is stock OS for all Nexus 5 devices and is rolling out currently to most high-end Android phones if they don't already have it.

[marcsyp]

@mlynch @mhartington

Still wondering why people aren't flocking to this thread in droves and why there has been no response from the Ionic team. The scroll inside Slidebox problem exists in emulators and codepens of all varieties as well. Using Chrome Version 37.0.2062.124 m.

Try scrolling down in this list within a Slide Box:

http://codepen.io/calendee/pen/sofdv

My app is dead in the water until I can resolve this issue. Perhaps it's not an Ionic issue, but I am seeking some direction. Any thoughts???

Thanks, Marc

[marcsyp]

Happy to see an assignment here! I will be very very thankful if this is resolved, will tweet to the high heavens with joy.

Anyway, wanted to add another bit of detail.

There is another part of my app where I am using rn-carousel instead of a slidebox for swipeable content. I am also having the same problem not being able to tap-hold inside the carousel without being absolutely perfectly still with my touch. The behaviour is slightly different in that even on a failed tap-hold I don't see the horizontal swipe engage at the moment of touch, but if I move left or right it is indeed engaged.

Anyway, thanks for taking this on.

Marc

[marcsyp]

Don't know if this is helpful, but I ran across a known bug in Chrome + hammer that is affecting the scrollability of the Angular carousel, perhaps it has some relationship to the problem in the Slidebox as well:

https://github.com/hammerjs/hammer.js/wiki/How-to-fix-Chrome-35--and-IE10--scrolling-(touch-action)

[marcsyp]

Spectacular. Looking forward to trying this out. Is it available only in the nightlies at this point?

[apavillet]

@marcsyp Just tried it and yes, it also breaks a lot of other things and docs is not up to date i think :)

[ajoslin]

Be sure to follow the migration guide, and use the nightly version of the docs for now.

On Oct 8, 2014, at 11:24, Adrien Pavillet notifications@github.com wrote:

@marcsyp Just tried it and yes, it also breaks a lot of other things and docs is not up to date i think :)

— Reply to this email directly or view it on GitHub.

[apavillet]

@ajoslin Thanks where can i find the migration guide?

[ajoslin]

Here: https://github.com/driftyco/ionic/commit/7ef9ad74cf6fd12b33e7d48915208ccfbeb5d531

[ajoslin]

Or here: http://code.ionicframework.com/nightly/CHANGELOG.html

[marcsyp]

Well, I updated to the nightlies and refractor my code as per the changelog. The swipe sensitivity seems to be fixed. Yay.

However....

Scroll performance is really terrible inside the slide box. Like really terrible and not smooth at all. My code (see above) wouldn't scroll at all, so I wrapped the contents of the slide in an . Is that not the right thing to do?

Also troubling, the tap-hold directives are still not working well at all. In some cases, it seems worse than before.

Any thoughts? Should I open new issues?

[marcsyp]

In an ion-content

[ajoslin]

Marcysp, can you create a simple and concise codepen describing this problem in the latest version ? I haven't looked at the codepen you already posted; I want to be sure it's up to date and the use case is as small as possible.

Also, can you describe the exact platforms the problem occurs on and confirm the problems still happen on the same platforms?

If I'm going to look at this I need to be able to get at the root of the problem as quickly as possible. Hope you understand. Thank you.

[marcsyp]

I made a Cordova project with the tabs app base as the starter. Just added a few extra data items, put in a slide box, and changed the hrefs to on-taps. This is using the latest nightlies (downloaded today) and running on an Android 4.4.4 OS, Galaxy S5.

Not seeing the performance problems with this small project. On my full project, I get scrolling that stops dead in its tracks and is very choppy.

I am, however, still seeing the following:

1) on-tap directives are very unreliable. They work maybe 1 out of 3 or 1 out of 5 times. 2) The horizontal swipe is still a little too sensitive. When swiping my finger down in a natural hand holding position (to go up in a scroll view), I quite often get zoomed to the next page as if I performed a horizontal swipe from right to left (advancing the slidebox). You'll see this problem here, and in my full app it is particularly squirrelly because my interaction model involves firing specific events when swiping to the next slide... something you don't want to do by accident.

Here it is. Cordova 3.6.3, created with the latest Ionic CLI and built with Cordova CLI.

https://drive.google.com/file/d/0B1ClGdseCfJdM1I3TC1xSC1HXzQ/view?usp=sharing

[marcsyp]

Added a bit more of my project's detail to see if I could reproduce the performance problems. I start to get some slowdown when adding custom CSS but it's not as bad as in my full app. Not sure how to get to the bottom of that, please let me know if you have any pointers, I'm not proficient with profiling tools.

Here is the second version, with some extra CSS:

https://drive.google.com/file/d/0B1ClGdseCfJdYWwwSHlVRjlHRDQ/view?usp=sharing

Thanks.

[ajoslin]

@marcysp I just pushed a commit making it easier to scroll vertically (it gives you a few more pixels of horizontal room when deciding you're vertically scrolling).

[ajoslin]

Your click problem is twofold:

1. You're using <label> elements. The point of <label> elements is that they don't accept clicks, they pass the click to a nearby input. Use <div>s instead and your clicks work.
2. Use ng-click instead of on-tap. I'm not sure why we included onTap at all.

Your on-hold problem, I'm not sure.

[marcsyp]

Great.

Any thoughts on the tap-hold (on-hold) and performance issues? I can't fully recreate the performance issues, though there are performance lags in the demo project that could be studied. The tap-hold issue should be pretty obvious.

Thanks, Marc

[marcsyp]

Sorry, we wrote those last messages in parallel.

Anyway, the on-tap has been working fine, in the past and currently. It's the tap-hold that has been the problem. Anyway, I will change in case there is some interference.

The on-hold problem definitely surfaced in Android 4.4.4. I thought it was related to the swipe sensitivity, but perhaps it is independent.

Thanks, Marc

[ajoslin]

OK. Could you create a simpler codepen and open a separate issue for the onHold? I don't think it has to do with the swipe.

[marcsyp]

Have opened a new issue:

https://github.com/driftyco/ionic/issues/2373

Incidentally, I changed to ng-click and now I know why I had changed it to on-tap. On-tap has a threshold which prevents the click handler from engaging if the click is beyond a certain length. Either way, it has no effect on the on-hold issue.

[PNSites]

@marcsyp Which of them solved your slides' sensitivity problem? There are 26 changed files and, as I am new to Ionic, it is hard for me to really understand which one of them solves the sensitivity problem.

Thank you!

[ionitron-bot[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.