Visibility transition causing rerender issues between routes in Sveltekit

[madeleineostoja]

When initiallyVisible or alwaysVisible is true, Svrollbar doesn't properly rerender when changing routes in Sveltekit, causing layout bugs. This only occurs if the one of the visible override props are used, I assume due to the scrollbar not unmounting/updating in time (is there a rogue exit transition or something?)

Screen.Recording.2022-05-17.at.12.56.52.PM.mov

[daylilyfield]

@madeleineostoja thanks for reporting. could you reproduce this issue in svelte REPL? or do you have any example source code which can reproduce this issue?

[madeleineostoja]

I don't have open source code I can share unfortunately, and putting together a sufficient REPL repro would take a while. Let me see if I can put something together when I have some time

[madeleineostoja]

Just a quick update, haven't had a chance to build an open source repro project, but with further investigation it's not those props, it's whenever there's pending transitions while changing routes. Changing the transition configs (vThumbIn/Out and vTrackIn/Out) to 0 duration fixes the issue, though obviously isn't a great user experience for actual usage.

[madeleineostoja]

My very hacky workaround for now:

<script>
  let scrollReady = true;

  beforeNavigate(() => (scrollReady = false));
  afterNavigate(() => (scrollReady = true));
</script>

{#if scrollReady}
  <Svrollbar ... />
{/if}

[iliser]

Yeah I'm also catch this bug.

This bug caused by svelte transiton design, and mostly appear with relative layout and as described here better solution is just use |local modifier on transition.

Also I open PR #11 for solve this, and right now just use fork -_- while awaiting