fix position

Author: Rich-Harris

packages/site-kit/src/lib/actions/legacy-details.ts

@@ -1,6 +1,7 @@
 import { page } from '$app/stores';
 import { persisted } from 'svelte-persisted-store';
 import { get } from 'svelte/store';
+import { fix_position } from './utils';
 
 const show_legacy = persisted('svelte:show-legacy', true);
 
@@ -30,20 +31,13 @@ export function legacy_details(node: HTMLElement) {
 
 				show_legacy.set(detail.open);
 
-				const top = detail.getBoundingClientRect().top;
-
-				for (const other of details) {
-					if (other !== detail) {
-						other.open = detail.open;
+				fix_position(detail, () => {
+					for (const other of details) {
+						if (other !== detail) {
+							other.open = detail.open;
+						}
 					}
-				}
-
-				const delta = detail.getBoundingClientRect().top - top;
-
-				if (delta !== 0) {
-					// whichever element the user interacted with should stay in the same position
-					(scroll_parent ?? document.body).scrollBy(0, delta);
-				}
+				});
 
 				setTimeout(() => {
 					secondary = false;

packages/site-kit/src/lib/actions/utils.ts

@@ -0,0 +1,18 @@
+export function fix_position(element: HTMLElement, fn: Function) {
+	let scroll_parent: HTMLElement | null = element;
+
+	while ((scroll_parent = scroll_parent.parentElement)) {
+		if (/^(scroll|auto)$/.test(getComputedStyle(scroll_parent).overflowY)) {
+			break;
+		}
+	}
+
+	const top = element.getBoundingClientRect().top;
+	fn();
+	const delta = element.getBoundingClientRect().top - top;
+
+	if (delta !== 0) {
+		// whichever element the user interacted with should stay in the same position
+		(scroll_parent ?? window).scrollBy(0, delta);
+	}
+}

packages/site-kit/src/lib/components/Text.svelte

@@ -2,6 +2,7 @@
 	import { afterNavigate } from '$app/navigation';
 	import type { Snippet } from 'svelte';
 	import { prefers_ts } from '../stores/prefers_ts';
+	import { fix_position } from '../actions/utils';
 
 	let { children }: { children: Snippet } = $props();
 
@@ -19,8 +20,9 @@
 
 	function toggle(e: Event) {
 		if ((e.target as HTMLElement).classList.contains('ts-toggle')) {
-			$prefers_ts = (e.target as HTMLInputElement).checked;
-			update();
+			const input = e.target as HTMLInputElement;
+			$prefers_ts = input.checked;
+			fix_position(input, update);
 		}
 	}