fix: prevent Nav flickering on mobile (#164)

Firefox for Android occasionally emits multiple scroll events with the same `scrollTop` integer value towards the end of an inertia scroll, which causes the Nav to flicker between visible states. This fixes it by keeping the visible state the same if `scrollTop` is unchanged.
sveltejs · Jul 15, 2023 · 1462fbe · 1462fbe
1 parent 202903c
commit 1462fbe
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/.changeset/yellow-islands-pump.md b/.changeset/yellow-islands-pump.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/site-kit': patch
+---
+
+Fix nav flickering on mobile
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -37,7 +37,9 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 		const scroll = root_scroll_element.scrollTop;
 		if (!hash_changed) {
-			visible = scroll < 50 || scroll < last_scroll;
+			visible = scroll === last_scroll
+				? visible
+				: scroll < 50 || scroll < last_scroll;
 		}
 
 		last_scroll = scroll;