Crossfade page transitions not clearing prior page

[JohnRSim]

Describe the bug
The prior page during crossfade transition is not cleared when service workers/caching is enabled if you interact between pages during the crossfade animation transition period.
This creates overlapping pages - attached screenshot below.
It is possible to create multiple overlapping pages that have not been correctly cleared.

If service workers/cache is disabled then I am unable to replicate the issue and the transitions work fine from my mobile.

Using Chrome Version 79.0.3945.130

Following the page transition guide by @buhrmi
https://dev.to/buhrmi/svelte-component-transitions-5ie

Logs
n/a no error logs

To Reproduce
Enable service workers and use the following-
https://dev.to/buhrmi/svelte-component-transitions-5ie
make sure cache is enabled and you have not selected disable cache within developer tools.

• Clone https://github.com/JohnRSim/CrossfadeTransitionIssue
• Select the about tab

Expected behavior
The page transition / crossfade from page to page should know the landing page and check to confirm it has correctly cleared the prior page.

Stacktraces
n/a

Information about your Svelte project:
Chrome 79.0.3945.130
Win10
Svelte/Sapper - 3.17.0/0.27.9
Rollup

Severity
Minor

Additional context
n/a

You can see here two <section pages are listed there should only be one left after the transition.

[JohnRSim]

https://vimeo.com/389240441

• here is a quick video where you can see at the end the issue with the crossfade if I click during the animation cycle.

The prior DOM page is not cleared.

[JohnRSim]

Quick screenshot showing the issue in browser.

[Conduitry]

There's not much anyone can do to help or debug if there's not a (preferably minimal) repo that can be cloned to reproduce this.

[JohnRSim]

Working on it ;)

[JohnRSim]

@Conduitry here is cut down simplified version of the issue -
https://github.com/JohnRSim/CrossfadeTransitionIssue

Created a basic example based off
https://dev.to/buhrmi/svelte-component-transitions-5ie

Issue is here with setTimeout
https://github.com/JohnRSim/CrossfadeTransitionIssue/blob/master/src/routes/about.svelte

Is the best approach to use on:introstart to clear the timers?
Prior I had them set within the onDestroy but realise now this is not triggered.

[JohnRSim]

I've tried removing timeouts and adding the delay on the fades - still getting the duplication of pages when history.back initiated during the transition.

[JohnRSim]

I've cleaned up the sample and located the issue.

An Ajax request was updating the data on the DOM during the page transition back.
Crossfade does then not remove the prior page.

I've replaced the ajax request with timeout - where dummydata var is being updated in the repo
https://github.com/JohnRSim/CrossfadeTransitionIssue/blob/master/src/routes/about.svelte

I think this is a bug

• I can fix the issue by clearing the timeout during the crossfade page transition or killing the fetch request with the AbortController API..

[antony]

I think this is the same bug (or related to #3202 and #3685) - there are known issues with transitions and route changes (unmounting components).

Using |localon your transitions can fix a lot of these. Can you see if that works?

• not denying the issue here at all, just wondering what our default mode should be.

[JohnRSim]

I will give it a go this morning and let you know.

[JohnRSim]

@antony I added |local the crossfade page transition fadein/out worked as prior however the element transition set with out:send,in:receive stopped working.

[Conduitry]

Is this fixed in 3.21.0, which fixes several other similar transition issues?

[antony]

Confirming that the repro provided in the original issue works with the current version of Svelte:

 ant@apse  /home/ant/Projects/CrossfadeTransitionIssue   master ✘ ✹  npm ls svelte                                                                                                            22:33:29 
altas@0.0.2 /home/ant/Projects/CrossfadeTransitionIssue
└── svelte@3.29.0 

💯 🥳