<transition-group> not working as expected on page scroll

[Justineo]

Version

2.5.16

Reproduction link

https://codesandbox.io/s/kxkmp9mov3

Steps to reproduce

1. Create a list using <transition-group>.
2. Put the list at the end of a long page.
3. Scroll to the bottom of the page.
4. Trigger some change so that the page height is reduced and force the viewport to scroll upwards a little bit.

What is expected?

The existing items should stick to the container, instantly appear in the final position, without transitions.

What is actually happening?

The existing items jump out of the container because of the sudden change on vertical position and slowly move back to the expected position.

---

Internally, <transition-group> is using getBoundingClinetRect() to track the positions of transition items. This works fine when no page scroll is introduced. But when browsers force page scroll on certain situations, the container (and the rest of the page) flashed into the final position while transition items are stuck in the old position based on the viewport, which makes it look like they suddenly jump out of the document and start performing unexpected transitions.

Maybe we can provide some new prop on <transition-group>, say, origin: 'viewport' | 'document', to optionally calculate positions based on the canvas origin instead of the viewport.

F.Y.I.

When forced page scroll is triggered:

When not triggered:

[misterobot404]

Same problem. How to fix?

[saschwarz]

FWIW I worked around this by forcing scrolling to the top on route transitions: https://router.vuejs.org/guide/advanced/scroll-behavior.html

const router = new Router({
  mode: 'history',
  scrollBehavior(to, from, savedPosition) {
      return { x: 0, y: 0 }
  },
...