Fix #14807: Navigation - The NEXT button in the SvelteKit documentation

packages/svelte/src/internal/client/dom/hydration.js

@@ -48,10 +48,30 @@ export function hydrate_next() {
 export function reset(node) {
 	if (!hydrating) return;
 
-	// If the node has remaining siblings, something has gone wrong
-	if (get_next_sibling(hydrate_node) !== null) {
+	var next = get_next_sibling(hydrate_node);
+
+	if (next !== null) {
 		w.hydration_mismatch();
-		throw HYDRATION_ERROR;
+
+		// If the remaining sibling is a comment node (a Svelte hydration marker), this is a
+		// genuine structural mismatch between server and client rendering — bail out
+		if (next.nodeType === COMMENT_NODE) {
+			throw HYDRATION_ERROR;
+		}
+
+		// Otherwise, extra non-comment siblings may have been inserted by browser tools such as
+		// translation extensions (e.g. Google Translate wraps text nodes in <font> elements).
+		// Remove them rather than failing hydration completely.
+		while (next !== null && next.nodeType !== COMMENT_NODE) {
+			var following = get_next_sibling(next);
+			next.remove();
+			next = following;
+		}
+
+		// If there is still a remaining sibling (a comment node), something is genuinely wrong
+		if (next !== null) {
+			throw HYDRATION_ERROR;
+		}
 	}
 
 	hydrate_node = node;

packages/svelte/tests/hydration/samples/google-translate-style/_config.js

@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+// Simulates Google Translate (and similar browser translation tools) wrapping
+// text content in <font> elements, which was causing hydration to fail and
+// blank the page. See https://github.com/sveltejs/svelte/issues/14807
+export default test({
+	props: {
+		name: 'world'
+	},
+
+	expect_hydration_error: true
+});

packages/svelte/tests/hydration/samples/google-translate-style/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let name;
+</script>
+
+<h1>Hello {name}!</h1>