ionic-framework: ion-list with deferred item content shows up blank intermittently on iOS
Hi,
I’m using the current nightly and I have a controller that looks something like this (modified to anonymous the problem domain):
angular.module("myApp.controllers", ["myApp.services", "ionic"])
.controller("listController", ["$scope", "itemService", function ($scope, itemService) {
itemService.getItems()
.then(function (items) {
$scope.items = items;
});
});
$scope.showItem = function (itemId) {
...
};
}]);
And a view like this:
<ion-view title="List of items">
<ion-content>
<ion-list>
<ion-item ng-repeat="item in items" ng-click="showItem(item.Id)">
...
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Generally, if I start on that view it will show up OK, but whenever I switch between tabs and come back to that view then 9 times out of 10 the list items will be invisible, but generally (and again, this can be intermittent too) when I tap and hold where the items should be then they show up.
This only happens in iOS (I’m testing with a 4S running iOS 7.1, I don’t have a 5 on hand to try), it doesn’t seem to happen on Chrome on Windows or on Android 4.
I tried attaching weinre to debug, but the act of doing that seems to fix the problem.
I can also replicate the problem exactly by not using a service/promise, but instead populating $scope.items using a setTimeout. This definitely wasn’t a problem in 0.9.27, which is what the app currently uses - I’m trying to upgrade to the latest to get all the scrolling fixes.
Thanks
About this issue
- Original URL
- State: closed
- Created 10 years ago
- Comments: 19 (5 by maintainers)
Woot! I’ve fixed the problem by introducing a
-webkit-transform: translate3d(0,0,0);against.list .item.While I’m sure the problem is brought about due to some sort of interaction from ionic I’m also happy it’s not inherent in the styling that comes with ionic. If someone complains about this bug in the future then at least I’ve documented the cause, symptoms and resolution here! 😃
Thanks for your help @ajoslin - you were really helpful in pushing me in the right direction.
Year 2017 and ionic v3.7.1 and this thread help me fixed the similar issue. Thank you @robdmoore.
For me, only in Android when ion-menu is in opened state the ion-content data was not showing whenever the content had some pre existing scroll. Added
-webkit-transform: translate3d(0,0,0);to .item and .list and now it is working perfect. Thank you!i have spent ages trying to figure out why some list elements are hiding. Big bow for this solution Mr.robdmoore