Элемент Svelte при переходе не обрезается

Question

Поэтому не знаю, как это очень хорошо объяснить, но в основном элемент, который в настоящее время находится в переходе, используя svelte/transitionперекрывает элементы, которые должны его обрезать. См. Изображения ниже

Без обтравочного элемента:

С обтравочным элементом (без перехода):

С отсечным элементом (при переходе):

Вот код переходного элемента:

      <script lang="ts">
    import { onDestroy, onMount } from 'svelte';
    import { fade } from 'svelte/transition';

    let interval: NodeJS.Timeout;
    let currentIndex = 0;
    const techs = ['Flutter', 'Dart', 'Svelte', 'React', 'JavaScript', 'Typescript'];

    onMount(() => {
        interval = setInterval(() => {
            if (currentIndex === techs.length - 1) {
                currentIndex = 0;
            } else {
                currentIndex++;
            }
        }, 2000);
    });

    onDestroy(() => clearInterval(interval));
</script>

{#key techs[currentIndex]}
    <span in:fade={{ duration: 500 }}>
        {techs[currentIndex]}
    </span>
{/key}

Код для элемента обрезки (ящик):

      <script>
    import { fade } from 'svelte/transition';

    let open = false;
    const toggle = () => (open = !open);
</script>

{#if open}
    <div
        class="fixed top-0 right-0 left-0 h-screen bg-black opacity-50 z-20"
        on:click={toggle}
        transition:fade={{ duration: 200 }}
    />
{/if}

<aside
    class="{ open ? 'w-60' : 'w-0' } h-screen fixed top-0 right-0 bg-white z-50 transform transition-all ease-in-out overflow-hidden duration-300 {open
        ? 'translate-x-0'
        : 'translate-x-full'}"
/>

<span class="inline md:hidden" on:click={toggle}>
    <i class="material-icons text-gray-600">menu_open</i>
</span>

Я использую Tailwindcss для обработки стиля и некоторых анимаций.