Solution 1 :

One explanation could be that you use transitions on the pages’ outer elements.

When using, for example, the fade transition provided by Svelte, elements that are fading in and out at the same time (e .g. in order to replace each other) will both be visible for the duration of the transition.

To avoid this behavior, you need to add a delay on the element that is fading in, corresponding to the duration of the fade out transition. This will cause the new element to only be visible when the old element has already been removed from the DOM.

As an example:

<main in_fade={{ delay: 100, duration: 100 }} out_fade={{ duration: 100}}>

Please see the Svelte docs for more information on transition parameters.

Problem :

I have a sapper/svelte app that when I navigate from my profile page to another page (let’s say home) the home page loads underneath the profile page for a split second. Then loads normally.

Before clicking to go home:

enter image description here

After clicking home page link:
enter image description here

This is crazy to me and I have no idea whats going on??

After a split second, the profile page disappears and the home page displays correctly.

Comments

Comment posted by Thomas Hennes

How can anybody give you assistance if you don’t provide code, context, etc.?

Comment posted by GrepThis

@ThomasHennes There is nothing special goin on. Not much code to show it’s just navigation around a sapper app

Comment posted by Ari Seyhun

I’m not sure why people disliked this question.. it is a good question and I’m also coming across this issue.

Comment posted by GrepThis

Yes, apparently any ‘out’ transition no matter how deep in the tree the node is will affect un-mounting parent DOM elements. This has to be a bug in svelte. But this could be a solution. Thank you

Comment posted by Svelte docs

I think you can use the

By