SvelteKit Page Disappears/Flashes on iOS Safari with SSR #15991

artttimiron · 2025-05-23T17:13:22Z

artttimiron
May 23, 2025

When using SvelteKit with server-side rendering (SSR), pages flash/appear briefly and then disappear completely on iOS Safari. 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

Page loads and displays content for ~1 second
Page content completely disappears (white/blank screen)
No console errors visible in Safari DevTools
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)

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

Ocean-OS · 2025-05-26T17:50:53Z

Ocean-OS
May 26, 2025

You should probably ask this question on the SvelteKit repo

0 replies

artttimiron · 2025-05-27T20:08:32Z

artttimiron
May 27, 2025
Author

sveltejs/kit#13833 (comment) - Moved to SvelteKit

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

SvelteKit Page Disappears/Flashes on iOS Safari with SSR #15991

Uh oh!

{{title}}

Uh oh!

Workaround that fixes the issue:

Additional Context

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

SvelteKit Page Disappears/Flashes on iOS Safari with SSR #15991

Uh oh!

artttimiron May 23, 2025

Environment

Expected Behavior

Actual Behavior

Reproduction Steps

Minimal Reproduction Case

Workaround that fixes the issue:

Additional Context

Replies: 2 comments

Uh oh!

Ocean-OS May 26, 2025

Uh oh!

artttimiron May 27, 2025 Author

artttimiron
May 23, 2025

Ocean-OS
May 26, 2025

artttimiron
May 27, 2025
Author