Slow button response time with Capacitor x Svelte on Ios

Question

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>

Answer 1

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

EDIT

Safari will automatically introduce a 300ms delay to account for users potentially double tapping on a page to zoom in. This is not needed though if you include a proper viewport meta in the head of the index.html.

<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"/>

If this viewport is provided, Safari will not introduce a delay in a click/tap. Here is a reference to a Safari issue which resolves this issue.