Vue: Scroll reset/jump when going up with dynamic height rows

[exception-producer]

Describe the bug

When scrolling to the bottom of the list of dynamically sized rows and going back up, the scrolling view gets stuck and jumps back to the bottom around when the last row goes out of view. This does only seem to happen with the vue version though, but can already be reproduced with the documentation's example.

One can "escape" by scrolling up very quickly, but this should not happen, of course.

This sometimes also happens in random places of the list - however only when scrolling up. I've not been able to reproduce this consistently yet though. The root cause seems to be the same.

Your minimal, reproducible example

https://tanstack.com/virtual/v3/docs/framework/vue/examples/dynamic

Steps to reproduce

1. Go to https://tanstack.com/virtual/v3/docs/framework/vue/examples/dynamic
2. Scroll to the bottom
3. Try scrolling back up

Expected behavior

That it scrolls as one would expect

How often does this bug happen?

Every time

Screenshots or Videos

https://github.com/user-attachments/assets/d7d64a3f-c6a9-42d5-bd7d-10cbd80eb396

Platform

every

tanstack-virtual version

3.13.0

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• [x] I agree to follow this project's Code of Conduct
• [x] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[Azq2]

Try overflow-anchor: none https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor

It appears that Chrome has recently changed its behavior of automatically restoring the scroll when dom elements are removed or added. But the bug has always been there. Virtual scroll without "overflow-anchor" is undefined behavior.

This should be in the documentation.

[melishev]

@Azq2 thank u man!

[marcomafessolli]

Try overflow-anchor: none developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor

It appears that Chrome has recently changed its behavior of automatically restoring the scroll when dom elements are removed or added. But the bug has always been there. Virtual scroll without "overflow-anchor" is undefined behavior.

This should be in the documentation.

@Azq2 you´re a hero!

[melishev]

Try overflow-anchor: none https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor

It appears that Chrome has recently changed its behavior of automatically restoring the scroll when dom elements are removed or added. But the bug has always been there. Virtual scroll without "overflow-anchor" is undefined behavior.

This should be in the documentation.

Interestingly, the same example on React does without this property and everything works fine.

[craftycram]

got the same issue with Firefox. The overflow-anchor: none; fix doesnt seem to be working there