[WIP] Jumping issues with enableUnequalChildrenSizes #479
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
When the items are of different size and take some time to render, the virtual scroller may be in a situation where there are items on top of the ones that are displayed that have not been rendered and thus measured by the cache yet. With variable sizes, this can be a problem, as we rely on the cache, or on the default size to measure the correct padding and avoid jumping issues when scrolling top. This commit tries to address this issue but still needs further work.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
A stackblitz reproducer which highlights a bit the problem; scroll to the middle, invalidate the cache, scroll upwards and see sometimes how the virtual scroller jumps. Obviously the problem is more concerning / visible on more complex components.
Description of the problem
Basically, this happens when unknown size items are on top of the already rendered items. When scrolling top, these items will eventually be rendered, but their size will be different than the one the virtual scroller expects. So if we want to be fine we will have to adjust, and I found no other thing than adjusting the scroll position. This doesn't fully fix the issue though, and there still seem to be some kind of jumping here and there, when slowly scrolling with the wheel. Do you have any idea on what I could be missing or if there could be a suitable work around?
I feel like this is also due to the activation of the scroll event when re-rendering the items (as the scroll position was modified by the virtual scroller with this fix) which re-triggers the refresh_internal method and can cause a useless re-rendering (making the screen blink). All my attempts at trying to avoid that by unlistening the scroll event failed.
Other attempts at fixing it
I also tried to implement a method which would basically avoid getting into that spot. It basically consists of implementing a getItemHeight injected method that can be provided by the component using the virtual scroller. This would theoretically enable the virtual scroller to know statically the width / height of each item. It also has drawbacks though, and even if I implemented it successfully, I don't think it is a suitable solution as the rendering has to be pixel perfect in order for it to work in all possible configurations (the height can change arbitrarily it seems, and the rendering is slightly different according to the navigators and the zoom value, even if height is explicitely set).
PS: sorry for the indentation modification, the template / style did not change one bit