Initial state wrong

Question

Initial state wrong

Closed this issue 8 years ago · 8 comments

I'm working on a project with two scrolling views. I've set in-view-container on both containers (that have overflow: scroll set).

One of them works properly, the other one shows all contained items as inview initially. Afterwards, when scrolling inside the container, it works properly, but the initial load is wrong.

First I thought that the combination with angular-scroll-glue could be the problem, but I disabled that and it still shows all elements as initially visible.

Any idea how to debug this issue?

Answer 1 · 2016-09-12T13:01:56.000Z

interesting, there are various issues concerting the initial state. could you reproduce you problem with something like JSBin https://jsbin.com/sinoba/edit?html,js,output ?

Answer 2 · 2016-09-15T12:40:33.000Z

I'm having the same issue here.

@thenikso It might be something to do with the directive being fired before the DOM is rendered. I had the same issue in a custom directive in my project and after wrapping the link's method first call in a $timeout, it worked perfectly.

More infos here: http://stackoverflow.com/questions/11125078/is-there-a-post-render-callback-for-angular-js-directive

P.S.: I'm out of time to test and send a PR now, but let me know if you'll need help and I try to check it when I have some time.

Answer 3 · 2016-09-19T19:17:08.000Z

I'm having a similar issue as well, not with overflow: scroll, but with a list that is dynamically populated. I have a list that is fetched from an API and the list is hidden with ng-show until the fetch finishes. When it does finish, all items are reported as inview and then it works correctly after scrolling.

Example: https://jsbin.com/tuyadihobi/edit?html,js,output

Changing the ng-show to ng-if fixes it. Might be similar to #93.

Answer 4 · 2016-09-24T15:38:45.000Z

Could any of you try out PR #110 ? It should fix the problem. The money is on the setTimeout at line 370

thanks for the feedback! cc @mabeyj @mdentinho @dbrgn

Answer 5 · 2016-09-26T20:12:05.000Z

@thenikso That PR does indeed fix it for me. Thanks!

Answer 6 · 2016-09-27T08:06:27.000Z

Yep, seems to work fine now, thanks! :)

Answer 7 · 2016-09-28T14:55:44.000Z

Fantastic 🎉 version 2.1.0 is now on npm

Answer 8 · 2018-02-21T16:16:46.000Z

@thenikso this is broken again in version 3.0.0. I have a container with list items, the items that are initially visible are not triggering the inView expression until I scroll. We have to keep 2.x on our project for now.