Small layout shift issue when scroll about virtua HOT 6 CLOSED

Hi @inokawa , I've tested with virtua v0.9.1 and it totally fine 🤣, so this issue only happen with v0.12.0, it seem strange

my code for virtua part is pretty simple, you can see it here: https://github.com/luminous-devs/lume/blob/feat/v2/src/shared/widgets/local/network.tsx

I will setup more reproduction when I have time, I will stick with v0.9.1 for now

from virtua.

Hi @inokawa , I've tested with v0.13.0 and it work really well

from virtua.

Hello, thank you for your interest in my lib!

I think that is not related to #65 .

Any reproduction code would help me investigating it more, but what I can guess now is:

• Resizing (of image or something else) at the outside of the top of VList may cause layout shift in certain situations. Currently this lib fixes jumps when scrolling up but not when not scrolling. It might be better to change that behavior.
• You have to set true to shifting prop when you add items to the start of the list, otherwise layout shift may happen.
• Using virtua after 0.11.0 may decrease shifts because I changed visible range detection algorithm, if you have not upgraded it yet.

from virtua.

Thank you for the additional information.

As I mentioned, I changed range detection algorithm in 0.11.0 and now items at the opposite side of scroll direction will be unmounted while scrolling, which is similar to react-window.
I suspect this behavior causes the problem.

from virtua.

I've a suggestion, instead of unmount the item, we can replace them with blank div match exact item's height

from virtua.

@reyamir
I've released 0.13.0 which has better jump compensation logic for outside of viewport. Could you try it?

I'm not sure it resolves your issue but it will have less layout shifts I think.

from virtua.