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. 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;'> </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>