Suspense + `out-in` Transition renderes component out of order

manniL

Jan 4th 2024

Vue version

since 3.3.10 (3.4.5)

Link to minimal reproduction

https://play.vuejs.org/#eNqNU01v2zAM/SuEL06BxM6Q7uIlXdehh+2wDm2Pvrg2k6iVJUGinRZB/vsoKd/bip5sPvGRj4/SOvlmTNZ3mBTJ1NVWGAKH1JmrUonWaEuwBrespNSre5wPYQkbmFvdQsqk9EupSlVr5QjuFMIMBhcwu4LlIG1Enw6ZW8vKuQJSQkcpbIaQaoXpxY71uNIfY9FKe9aO1wtcMfGgbMD991VrKeqXfd11qSAQsr6SnVd5HMxmQfrXIKXw/6XalGqaRzfYBw4IWyMrQo4Apqzy6lGbae5/AkK2Uk6Q0ApU1eKsTEy1wDKBVjc+0h2NhOK4aDpb+TwGJ+NxmQQ+V3jonEHlYoeA1Jr9V6gICuE43YvmCvmOkZ9QpvlBw0HljSbS7ZHQp44BBaLhgqQXC4k35HVdB8sYDF+WFROnefwymRscTODQ0Zv0v5mfdMQy0Y6qmkSPwx0osepxC8YtHDQWwJuDcXbp+A6x36eF/A07K0M6ltCmqgW9FTBmIsBcSCYU8CQ7O/hksb2I9Xh/W4HJMIk3edRWJnt2WvFdD6XK7YErkyIW9xjfax+XyZLIuCLP60YxrUEpepsppFyZNr/mtNx2ikSLo0a315PsMvvMRjs6hjN07ejJ6pVDy0XKhKfat8kZ7Hlai6pBi/ajbc9ox63Pjv5q77uzOxs2hRw/lrlYnFnir52QaO+MX9OpNeGx/QwY2c4vOuL1EuuXf+DP7jXO9NtiUHY0P1V2gRSPbx9+4Sv/7w/52XRyu4b/HN6j07LzGmPaTacaln2UF9T+CBsWavHobl+Jn8tuKC80uBHywz6+vzP6Qe4km+xd3PwBEinCwg==

Steps to reproduce

Click on the button
See that component is not replaced but rendered below all the other components

What is expected?

The component should be replaced in-place when the transition is triggered.

What is actually happening?

The component is rendered below, out of order

System Info

 System:
    OS: macOS 13.5.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 110.55 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.8.0 - /opt/homebrew/bin/npm
    pnpm: 8.5.0 - ~/Library/pnpm/pnpm
    bun: 1.0.21 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 119.0.6045.105
    Safari: 16.6

Repro in SFC Playground using macOS Firefox Dev Edition 122.0b3

Any additional comments?

As a workaround, wrapping a div around the transition works fine and replaces the component as expected. Using in-out (without a wrapper div) also works.

GitHub Track