Hey there,
I’m having a strange issue with content that’s wrapped in a ion-scroll will bounce back on the y axis, even though there is more content than is visible in the viewport. When inspecting the y transform always bounces back to 0px, regardless of how much content there is.
I’m on Ionic 1.0. nightly, and this happens on browser as well as sim or device.
I’ve tried everything: setting scroll="false" on the wrapping ion-content field, removing all custom directives, removing nav-bar, removing nav-header, putting padding on the content div, etc, but nothing seems to work.
The weird thing is, I can’t reproduce this issue when I adapt a Ionic starter codepen to this use case. In that case content DOES scroll on the y axis. So I know there must be something wrong in my code but I can’t pinpoint it anywhere.
I’ve put a very stripped down version of my app on my site because I don’t know how to quicky put this on codepen. Would anyone be so kind as to have a look and see why this is happening?
Link: http://mono9.nl/test_app
Code of partial:
<ion-view title="Scroll test">
<ion-content class="has-header" scroll="false">
<ion-scroll direction="y" id="map_content" delegate-handle="mapScroll">
<div ng-controller="ScrollCtrl" class="map_content_container">
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
</div>
</ion-scroll>
</ion-content>
</ion-view>
Code of index:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="css/ionic.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<script src="js/ionic.bundle.min.js"></script>
<script src="js/angular-sanitize.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="doge" ng-controller="AppCtrl" animation="slide-left-right-ios7">
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button class="button-icon">
<span class="white back_button_label">Back</span>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
Controller code:
angular.module('DOGE.controllers', [])
.controller('AppCtrl', function($scope, $rootScope, $stateParams, $timeout, $ionicPlatform) {
$ionicPlatform.ready(function() {
});
})
.controller('ScrollCtrl', function($ionicScrollDelegate) {
})
// Home screen
.controller('HomeCtrl', function($scope, $rootScope, $stateParams) {
})
.controller('MapCtrl', function($scope, $stateParams) {
});