We had reports of scrolling being unusable in our app and narrowed it down to a condensed scenario with video for you to review. It is reproducible in both iOS and Android
In our ionic app we have some content that needs to native scroll with overflow:auto. So we wrap it in a div that has data-tap-disabled=“true”. That works fine. But if the user touches a textbox that is within < ion-content >, touch scrolling breaks. If they touch away from the textbox, scrolling works again.
Also of note is that scrolling doesn’t break if the textbox is outside of < ion-content >, but only if you didnt touch a textbox inside < ion-content > first. Here are the scenarios shown in the video:
touchscroll–>touch textbox inside ionic–>touchscroll = doesn’t work
touchscroll–>touch textbox inside ionic–>touch blank–>touchscroll = works
touchscroll–>touch textbox outside ionic–>touchscroll = works
touchscroll–>touch textbox inside ionic–>touch textbox outside ionic–>touchscroll = doesn’t work
touchscroll–>touch textbox inside ionic–>touch textbox outside ionic–>touch blank–>touchscroll = works
So it seems like there is a bug where ionic disables scrolling if a textbox within it gets focus until no textbox anywhere has focus.
Here is the link to the video:
Here is the code used for the demo app:
<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/>
<script src="http://code.ionicframework.com/1.0.0-rc.3/js/ionic.bundle.min.js"></script>
<script>
var app = angular.module('demo', ['ionic']);
app.controller('DemoCtrl', function($scope, $http, $timeout, $interval) {
});
</script>
</head>
<body ng-controller="DemoCtrl">
<ion-content>
<div data-tap-disabled="true" style="border:1px solid;">
<ul style="overflow-y:auto;height:100px;">
<li>
<ul>
<li ng-repeat="a in 'abcdefghijklmnopqrstuvwxyz'.split('')">{{a}}</li>
</ul>
</li>
</ul>
<input type="text" value="inside ion-content"></input>
</div>
</ion-content>
<input type="text" value="outside ion-content"></input>
</body>
</html>