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: 7ef9ad7

[ajoslin]

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