SvelteKit Page Disappears/Flashes on iOS Safari with SSR

[artttimiron]

When using SvelteKit with server-side rendering (SSR), pages flash/appear briefly and then disappear completely on iOS Safari (only background color stay, but not components). The same code works perfectly when moved to client-side rendering (CSR). This issue is specific to iOS devices and doesn't occur on Android or desktop browsers.

Environment

• SvelteKit Version: 5.x
• Node.js Version: [21]
• Package Manager: [npm]
• Device: iPhone/iPad
• Browser: Safari (iOS)

Expected Behavior

Page should render and remain visible on iOS Safari, same as on other platforms.

Actual Behavior

1. Page loads and displays content for ~1 second
2. Page content completely disappears (only background color)
3. No console errors visible in Safari DevTools
4. Issue occurs consistently on iOS Safari only

Reproduction Steps

Minimal Reproduction Case

1. src/routes/test/+page.server.ts:

import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params }) => {
	// Simulate async data loading
	await new Promise(resolve => setTimeout(resolve, 100));
	
	return {
		userId: params.userId || 'test',
		items: [
			{ id: 1, name: 'Item 1', value: 100 },
			{ id: 2, name: 'Item 2', value: 200 }
		],
		showModal: true,
		currentDate: new Date().toISOString()
	};
};

2. src/routes/test/+page.svelte:

<script lang="ts">
	import type { PageData } from './$types';
	
	const { data }: { data: PageData } = $props();
	
	let selectedItem = $state(undefined);
	let showContent = $state(true);
	let modalOpen = $state(data.showModal);
	
	$effect(() => {
		console.log('Effect running', { selectedItem, showContent });
	});
	
	function handleItemClick(item) {
		selectedItem = item;
	}
</script>

<div class="container">
	<h1>Test Page - User: {data.userId}</h1>
	<p>Date: {data.currentDate}</p>
	
	{#if showContent}
		<div class="items">
			{#each data.items as item}
				<button onclick={() => handleItemClick(item)}>
					{item.name} - ${item.value}
				</button>
			{/each}
		</div>
	{/if}
	
	{#if selectedItem}
		<div class="selected">
			Selected: {selectedItem.name}
		</div>
	{/if}
	
	{#if modalOpen}
		<dialog open>
			<p>Modal content</p>
			<button onclick={() => modalOpen = false}>Close</button>
		</dialog>
	{/if}
</div>

<style>
	.container {
		padding: 20px;
		min-height: 100vh;
	}
	
	.items button {
		display: block;
		margin: 10px 0;
		padding: 10px;
		background: #f0f0f0;
		border: 1px solid #ccc;
		border-radius: 4px;
	}
	
	.selected {
		margin-top: 20px;
		padding: 10px;
		background: #e0f0e0;
		border-radius: 4px;
	}
	
	dialog {
		padding: 20px;
		border: 1px solid #ccc;
		border-radius: 8px;
	}
</style>

Workaround that fixes the issue:

set export const ssr = false;

Additional Context

• JavaScript error: Unhandled Promise Rejection: TypeError: Gr is not a function. (In 'Gr()', 'Gr' is undefined (I don't have such function) or TypeError: root is not a function. (In ‘root()’, ‘root’ is undefined) (if turn off minification
• Works perfectly on:
  • Chrome/Firefox (desktop)
  • Chrome (Android)
  • Safari (macOS)
• Only fails on iOS Safari (both iPhone and iPad)
• Converting to CSR (ssr = false) fixes the issue but loses SSR benefits

[artttimiron]

Seems the problem in Hydration, but I don't understand how to fix it. Thank you in advance, this question is so crucial for us, cause app is ready for prod deployment, but still don't work.