Animation jerks when returning to the feed

[iSpid3r]

Hello.

Apologies in advance for my english.

In general, the problem is this... If you scroll the feed from the very beginning, then everything works perfectly, absolutely smooth scrolling. BUT if you scroll through a few pages, enter one of the posts, and then return to the feed and restore the scroll position, terrible glitches begin, the feed jumps up and down almost every scroll.

I restore the position using "scrollInto":

scrollTo(id: number) { this.virtualScroller.scrollInto( this.items.find((e) => e.id === id), undefined, -50, 0 ); }

Demo is unrealistic, the project is huge and completely decomposed. Therefore, I am attaching a video for clarity.

NEWS.mp4

Help me please.

[Jugst3r]

Hi !
I am not a maintainer but I might have had the same problem as you are having, I am not a 100% certain though. I suppose your items are of unequal size. If so, have you tried scrolling back and forth, just to see if having the cache correctly set prevents this from happpening (once an item height is measured, it is stored in a cache by the virtual scroller to mitigate this kind of issue)? If this is it, good luck, I did not find a proper work around for it (see the last PR), but having a bigger bufferAmount and increasing the throttling time in the virtual scroller configuration can help a bit (my PR also helps a bit but does not fully solve the problem unfortunately and I do not think it is going to be merged any time soon seeing the absence of reaction).

If you have a good knowledge of your items height, even if they are unequal (they might depend on a number of line which is statically known and could be known), I could probably give you the other fix I tried which consists in giving the virtual scroller a method to statically know all of items height.

[Uchit-Patel]

@Jugst3r can you share the fix for giving the virtual scroll a method to statically know all the item's height?.
I was facing the similar issue for scroll glitches while scrolling. I have tried different methods but none worked. so finally I added the logic for calculating heights of each children before rendering.

[lincolnthree]

I would be also really be interested in the code to fix this. I have the same issue.

[Jugst3r]

Hi @Uchit-Patel,
I'll see if I can find the fix I did a year ago and come back to you shortly (tonight or tomorrow)

[lincolnthree]

@Jugst3r Thank you that would be awesome!

[Jugst3r]

Darn it, I could not find this :'(. I remember implementing it, but digging back into this (awful) code would take time that I don't have right now ...

Maybe you can try to see if the PR I did back then #479 mitigates the issue for your use case? I tried to explain a bit the (assumed) problem there

[Uchit-Patel]

Oh okay, No worries. Let me check that.

[Uchit-Patel]

Hiii @lincolnthree @Jugst3r .
I have checked the source code and came up with a wild patch. I am using "enableUnequalChildrenSizes: true". whenever my child item was bigger than viewport the scroll was jumping. I observed that in my use case i am not appending or prepending items ( not fetching new data from API by lazy loading ). All of my data is getting passed in virtual scroller at once. After debugging i found that below mentioned line was making scroll to jump.

So far my item array is not going to be changed. so I commented line 787. I am not sure about any side effects but i have tested it for basic functionality everything seemed working. I am using this mean while i am looking for a solid fix.

[lincolnthree]

This helps! Thanks so much!!!

I added an @Input to control whether or not this is enabled. I'm starting to think we (as a community) need to create and maintain a new fork, since this one seems pretty dead.

  @Input()
  public checkResizeOnModify = false;

...


        if (itemsArrayModified && this.checkResizeOnModify) {
          this.resetWrapGroupDimensions();
        }

Seems to be smoother! (We use pagination, so this happens all the time.)

[Uchit-Patel]

This helps! Thanks so much!!!

I added an @Input to control whether or not this is enabled. I'm starting to think we (as a community) need to create and maintain a new fork, since this one seems pretty dead.

  @Input()
  public checkResizeOnModify = false;

...


        if (itemsArrayModified && this.checkResizeOnModify) {
          this.resetWrapGroupDimensions();
        }

Seems to be smoother! (We use pagination, so this happens all the time.)

Glad to help!! I have done the same!

[Uchit-Patel]

Hey @rintoj , There should be an option to toggle this behavior for those who are not lazy loading the entire list. for those who are not appending or prepending items the solution I gave will solve the scrolling issue. what do you think? should i raise an PR for this?