the following code works fine in the browser, but the moment I package it as a phonegap app and try it on my Nexus 5, it stops working (without raising an error).
<ion-view title="{{destination}}">
<ion-content>
<div id="map-screen">
<div id="map-canvas" data-tap-disabled="true" ng-show="showMap()" class="animate-show-hide"></div>
<ion-scroll id="place-photo-footer" direction="x">
<div id="place-scroll" ng-controller="placeController as placeCtrl" style="width:5000px;">
<a ui-sref="place-detail({placeId: place.place_id})" ng-repeat="place in places">
<div class="place-item" class="animate-show-hide" id="place-{{place.id}}">
<img src="{{place.photos[0].getUrl({'maxHeight': 100})}}">
<img src="{{place.icon}}" class='icon'>
<div class='marker'>{{placeCtrl.getMarker(place)}}</div>
</div>
</a>
</div>
</ion-scroll>
</div>
</ion-content>
</ion-view>
One bit of information: this stopped working once I surrounded the main div by (which I am using to make it all work with nav-bar)
Any idea why this might be the case?
From experience, you should use block level elements for ng-repeat. For best performance, it is best to specify for each item in the list a width and height.
The documentation for ion-scroll states that "...it's important to set the height of the scroll box as well as the height of the inner content to enable scrolling. This makes it possible to have full control over scrollable areas."
For the most consistent results, I would highly recommend using ion-list for ng-repeat.
Hope this helps.