Slow button response time with Capacitor x Svelte on Ios

Hello,

I try to create a starter app with Capacitor and Svelte. Everything works fine except one thing, when I use native html anchor ( with svelte-routing) for navigate the there is a slow respond time to user interaction, maybe 400ms before app react on my Iphone 13 pro (real device) Ios 15. Same issue for native html buttons across my starter.

can you tell me if i did something wrong please ?

the starter repos → https://github.com/flameapp-io/svelte-capacitor-tailwind-starter

My navigation component :

<script lang="ts">
	import ThemeSwitch from '$lib/ThemeSwitch.svelte';
	import { Link } from 'svelte-routing';
	type NavLink = {
		name: string;
		url: string;
	};
	const navLinks: Array<NavLink> = [
		{
			name: 'Home',
			url: '/'
		},
		{
			name: 'Example',
			url: 'example'
		}
	];
</script>

<nav class="flex items-center">
	{#each navLinks as link}
		<Link to={link.url} class="mx-5">{link.name}</Link>
	{/each}

	<ThemeSwitch />
</nav>

Do you get the same error running the app outside of Capacitor in a web browser?

I’ve solved this issue by add this :

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

In my index.html

1 Like