Ionic-framework: ion-list with deferred item content shows up blank intermittently on iOS

[robdmoore]

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

[robdmoore]

Interestingly, I just realised that it was a problem in 0.9.27, it just only presents itself when I proxy to my computer rather than on the test environment. This is confusing since the only real difference is the latency and as I explained above the problem is there is a delay (and when I used bigger delay numbers while replicating with setTimeout it still happened).

[ajoslin]

I can also replicate the problem exactly by not using a service/promise, but instead populating $scope.items using a setTimeout.

This sounds to me like a problem where you set $scope.items, but angular has not digested yet so the DOM does not realize items is populated.

Is your itemService hooked up to angular? Does it trigger a digest when it gets the items?

[robdmoore]

I've been trying to come up with a reproduction for you. I'll be honest I'm struggling. I've got something that is reall weird, but it doesn't quite match up to what I'm experiencing in my app. It's entirely possible it's the same issue though. The good thing is this is happening reproducably on chrome on pc as well as my iPhone: http://plnkr.co/edit/QXonZUuZ8q0jMPpWX69S?p=preview

Basically if you click on the "one" or "two" items they then will change to "three" and "four". If I change the timeout for the setTimeout call to small values like 5ms or 1ms then the items show up as "three" and "four" straight away.

[robdmoore]

It doesn't trigger a digest ( I didn't realise you needed to - I'll admit I'm pretty new to angular though).

I tried a whole bunch of things to try and fix this though to see if I could isolate the problem, including explicitly calling $scope.digest after setting the items (which didn't seem to help.

[ajoslin]

Try calling $scope.$apply().

$scope.$digest only will do dirty checking on scopes on and below the given scope, $apply will dirty check all the scopes.

[ajoslin]

The problem with your plnkr is...

After the setTimeout, you change $scope.items, but angular's dirty-checking does not fire. Angular only dirty checks when it thinks it needs to - and in your example, it doesn't dirty-check after the setTimeout. It does when you click, though (because it's coded to do that in its click handler).

You need to add a $scope.$apply(); after you change the items from 'outside angular' (aka a setTimeout).

Alternatively, you can use the $timeout service of angular (recommended), which will $apply after the timeout elapses.

[robdmoore]

Right - that makes sense and I can confirm that adding $scope.$apply() does fix the plunkr. I just tried that in my app and unfortunately it doesn't fix the problem there. This is very frustrating - I wonder what is causing the issue.

It's worth noting I put the list outside of the ion-content and it didn't seem to happen, which is why I thought it was an ionic issue.

[ajoslin]

If you can create a reproduce case I'll check it out.

[robdmoore]

Sure - thanks.

FYI I just tried a $rootScope.$apply() for good measure, but it didn't work either.

[robdmoore]

OK - I have _finally_ replicated the problem. Its definitely a weird one! Seems to be some sort of weird CSS bug.

http://plnkr.co/edit/QXonZUuZ8q0jMPpWX69S?p=preview

It seems that if you add a margin of at least 5px and some sort of -webkit-* style (at least it did for border-radius or box-shadow) to .list .item then when you switch tabs the items are hidden unless you interact with them! :O

I'm not really sure if this is a bug in ionic anymore? It seems to be a weird Safari browser issue. Although, if I try and put the style outside of ion-content then it does render so there might be some sort of interaction with ionic...

[robdmoore]

Correction: margin of at least 1px

[robdmoore]

Further correction: It's not just the webkit-* styles, straight border-radius and box-shadow do it too.

[robdmoore]

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.

[ajoslin]

Interesting stuff... I still have no idea what it was! Haha
On Apr 12, 2014 12:25 AM, "Robert Moore" [email protected] wrote:

Closed #1110 https://github.com/driftyco/ionic/issues/1110.

Reply to this email directly or view it on GitHubhttps://github.com/driftyco/ionic/issues/1110
.

[neelima-appzop]

i have spent ages trying to figure out why some list elements are hiding. Big bow for this solution Mr.robdmoore

[gsushant]

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!

[robdmoore]

wow. memories haha

[yucomds]

Hi , I'm facing the same issue. I tried your solution adding "-webkit-transform: translate3d(0,0,0);" to .item and .list css classes (in app.scss), but do not work for me. I also tried to add the rule as inline style, but nothing. Maybe I misunderstood something ?! Thanks in advance !

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.