Vue3 + Transitions (Scrolling Issues)

[DactureEducation]

Frontend : Vue3
Inertia Version : Latest
Backend : Laravel / php

Issue / Assistance needed

Hey all,

I noticed that when using a base page, with a transition, the scrolling is applied before the transition is done.

EG. lets say we have a base page component, that simply wraps a slot / page in a transition vue component -:

    <template>
        <Header />
        <Transition mode="out-in">
            <div class="app-wrapper" :key="$page.url">
                <slot  />
            </div>
        </Transition>
    </template>

The transition fades out the old page, and fades in the new page.

However the inertia routing makes the scroll reset to the top when what appears the request to the new page has finished, meaning the page will jump to the top, then transition to the new page.

Expected / desired behavior is for scroll to be preserved until the page has faded out, then the scroll position to reset.

Is there anything specific that needs to be done in this scenario such overriding this behavior within the success event, or am I missing something? And if success even is needed with manual implementation, how would this be handled with pressing the forward/back button?

Many thanks in advanced!