fix: navigation & scroll issue in Safari by upgrading to Svelte 4 wit…

…h default local transitions

Caused by global transitions blocking the onDestroy of the old page, which left its nodes in the DOM for 300 ms (probably) after the onMount of the new page triggered. The new page is thus added below the old one (commonly reported issue). This resulted in the onMount ephemerally getting a far too high offsetTop value for the pricing section (because the old page content was still on top), which in turn made the scroll animation scroll to the end of the page instead.

Svelte 4 defaults to local transitions. It's still possible that some local "out" transition blocks the destroy of an old page, but for now, it seems to be fixed, because (now local) transitions on the home page are sufficiently nested.

All transitions were by default"global" before, I couldn't easily check the behavior of all global -> local migration cases. It's possible this fix causes a problem elsewhere. However, keeping the "local" default seems preferrable, since "global" lead to this bug.

package.json

@@ -31,7 +31,7 @@
     "@playwright/test": "^1.29.2",
     "@stripe/stripe-js": "^1.46.0",
     "@sveltejs/adapter-static": "^1.0.0-next.48",
-    "@sveltejs/kit": "^1.0.11",
+    "@sveltejs/kit": "^1.22.3",
     "@tmcw/togeojson": "^5.5.0",
     "@turf/turf": "^6.5.0",
     "@types/lodash-es": "^4.17.7",
@@ -53,16 +53,16 @@
     "maplibre-gl": "^1",
     "nprogress": "^0.2.0",
     "prettier": "^2.6.2",
-    "prettier-plugin-svelte": "^2.7.0",
+    "prettier-plugin-svelte": "^2.10.1",
     "smoothscroll-polyfill": "^0.4.4",
-    "svelte": "^3.55.0",
-    "svelte-check": "^3.0.1",
-    "svelte-i18n": "^3.3.9",
-    "svelte-preprocess": "^5.0.0",
+    "svelte": "^4.1.1",
+    "svelte-check": "^3.4.6",
+    "svelte-i18n": "^3.7.0",
+    "svelte-preprocess": "^5.0.4",
     "svelte-stripe": "^0.0.21",
     "svg-inline-loader": "^0.8.2",
     "tslib": "^2.3.1",
-    "typescript": "^4.9.4",
+    "typescript": "^5.0.0",
     "vite": "^4.0.4",
     "vite-bundle-visualizer": "0.6.0",
     "vitest": "^0.28.2"

src/routes/request-password-reset/+page.svelte

@@ -21,6 +21,9 @@
       isSending = false;
     }
   };
+  // Coordinate the transition duration to prevent both stages to be visible at the same time.
+  // See below.
+  const transitionDuration = 300;
 </script>
 
 <svelte:head>
@@ -34,7 +37,7 @@
   <div slot="form">
     {#if !done}
       <p class="description">{$_('request-password-reset.description')}</p>
-      <form transition:fade on:submit|preventDefault={submit}>
+      <form transition:fade={{duration: transitionDuration}} on:submit|preventDefault={submit}>
         <div>
           <label for="email">{$_('generics.email')}</label>
           <TextInput
@@ -53,7 +56,7 @@
         </div>
       </form>
     {:else}
-      <div transition:fade>
+      <div in:fade={{delay: transitionDuration}}>
         <p>{$_('request-password-reset.set', { values: { email: $formEmailValue } })}</p>
         <p>
           {@html $_('request-password-reset.trouble', {