Strange effect with inverted datasource

[DaveLomber]

Hi there

I have implemented inverted data source to work with chat messages:

datasource: Datasource;
MIN_DATASOURCE_ITEMS_INDEX = 1; 


this.datasource = new Datasource ({
  get: (index, count, success) => {
    const data = this.getAdpterData(index, count).reverse();
    success(data);
  },
  settings: {
    startIndex: -10,
  }
});

getAdpterData(_index: number, count: number) {
  const index = -_index - count + this.MIN_DATASOURCE_ITEMS_INDEX;
  const data = [];
  const start = Math.max(this.MIN_DATASOURCE_ITEMS_INDEX, index);
  const end = index + count - 1;

  console.log(`[DataSource][getAdpterData] ${start} -> ${end}. Total: ${this.messages.length}, Rendered: ${this.datasource.adapter.itemsCount}, bof ${this.datasource.adapter.bof}`);

  if (start <= end) {
    for (let i = start; i <= end; i++) {
      data.push({body: i + "", from: "asdasd", index: i});
    }
  }
  return data;
}

So far all is good when I scroll to top, to get older history

But then, when I returned to bottom and then scroll again to top - the datasource.get method started to calling so much times

This effect can be seen on this video https://www.dropbox.com/s/wri4kt6fnf21s0g/ng-invertedd-scroll.mov?dl=0

I did many diff checks, but still not able to get the root cause.
If anybody has an idea - please share, will be much appreciated

[DaveLomber]

Surprisingly it works well with Safari
but no in Chrome, Firefox

[dhilt]

@DaveLomber May I ask you to look at this stackblitz demo, where I reproduced your logic? Seems it works properly (on Mac Chrome). Could you please fork it and update styles and whatever else, so that the issue becomes apparent?

[DaveLomber]

I can confirm with your example it works well

but in my app I have this effect. I tried to get the root cause but still no luck..

[DaveLomber]

@dhilt this is indeed something with underlaying buffered items

I spent almost the whole day trying to debug the lib

And in the end I can make a demo https://stackblitz.com/edit/angular-ngx-ui-scroll-1-2-2-inverted-datasource to have this issue

we just need to comment a style of a viewport: /* overflow-anchor: none; */ and then the issue started to pop up

please see a demo of repro steps https://files.fm/u/eue9cq5t

Could you please comment it, for what reason this style is important

[dhilt]

@DaveLomber Well, it was some time ago -- angular-ui/ui-scroll#138 (comment) -- I decided to switch this behaviour off for the purpose of compatibility through all the browsers. As you can get from MDN:

The feature is enabled by default in supporting browsers. In most cases anchored scrolling is exactly what you want...

...but not in the virtual scrolling case if we are going to support also browsers that don't support scroll anchoring. The case where it takes an important part could be described as "compensation when scrolling top":

• we have [N..M] items registered in the scroller
• we scrolls to the N-indexed item
• scroller fetches K new items, so there will be [N-K..M] registered items
• K items are being rendered, backward padding element height is being reduced
• at this particular moment scroll anchoring plays its role: when it is disabled, the content jumps forward and the scroller adjusts the scroll position to make appropriate anti-jump; this bouncing is invisible because it occurs synchronously; having the scroll anchoring feature enabled we'll fall into the anti-jump issue, because scroller will try to adjust scroll position with no real need, and each time it will cause new items fetch-render-adjust cycle

As I mentioned, the scroll anchoring feature is disabled for the compatibility purpose. This disabling is included in the viewport's styling sample in the Readme, but I agree that the form might not be clear enough, so perhaps it would be a good idea to add some explanation there.

From the other hand maybe it will be better to handle anchoring case internally, but it might be not so easy... Anyway, that's just something to think about, but for now the restriction on the requirements level seems appropriate solution.

[DaveLomber]

Thanks @dhilt for the explanation

for now the issue is resolved and I'm happy :)

The only one suggestion I have - to give this style more attention in README,
because when integrate the lib into ready Angular big apps - it could produce an issue like this

[dhilt]

It is done