Weird trasnlateY with Ionic

[HipyCas]

Describe the bug

I am currently using the RecycleScroller alongside the Ionic Framework. Mixing it with an IonList and IonItem's, gives some weird translateWidth(itemHeight*100px) in the first of the elements, so there is a really strange shift of the list to the bottom.

Reproduction

<template>
  <PageWrapper>
    <IonSearchbar
      class="ion-padding-top z-20"
      enterkeyhint="search"
      placeholder="Buscar usuarios"
      :search-icon="person"
      showClearButton="always"
      v-model="searchQuery"
    ></IonSearchbar>

    <IonLoading :is-open="loading" message="Cargando"></IonLoading>
    <IonList>
      <RecycleScroller
        v-if="!loading"
        :items="filteredUsers"
        :item-size="47"
        :key-field="'id'"
        class="scroller"
        v-slot="{ item: user }"
      >
        <ion-item
          button
          detail
          class="id-item relative h-[74px]"
          :router-link="`/p/users/${user.id}/${user.name}`"
          router-direction="forward"
          lines="full"
        >
          <ion-text>{{ user.name }}</ion-text>
        </ion-item>
      </RecycleScroller>
    </IonList>
  </PageWrapper>
</template>

<script setup lang="ts">
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
import { RecycleScroller } from 'vue-virtual-scroller';

// TODO Alert if some users are out of sync with a banner on top
import { person, codeOutline } from 'ionicons/icons';

import {
  alertController,
  modalController,
  IonItem,
  IonList,
  IonText,
  IonFab,
  IonFabButton,
  IonIcon,
  IonSearchbar,
  IonLoading,
} from '@ionic/vue';
import PageWrapper from '../components/PageWrapper.vue';

const loading = ref(true);

const searchQuery = ref('');

const users = ref([] as User[]);

const filteredUsers = computed(() =>
  users.value.filter(({ name }) =>
    name.toLowerCase().includes(searchQuery.value)
  )
);

// Fetch users from API and hide loading with loading.value=false, around 600 results

<style>
.id-item::part(native) {
  background-color: var(--ion-background-color);
}

.id-list {
  background-color: var(--ion-background-color);
}

.scroller {
  height: 100%;
}
</style>

System Info

System:
    OS: Linux 6.2 Pop!_OS 22.04 LTS
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
  Binaries:
    Node: 19.4.0 - ~/.volta/tools/image/node/19.4.0/bin/node
    npm: 9.2.0 - ~/.volta/tools/image/node/19.4.0/bin/npm
    pnpm: 8.6.2 - ~/.volta/bin/pnpm
  Browsers:
    Brave Browser: 114.1.52.126
    Chromium: 114.0.5735.106
  npmPackages:
    @vitejs/plugin-vue: ^4.2.3 => 4.2.3 
    vite: 4.3.9 => 4.3.9 
    vue: ^3.3.4 => 3.3.4 
    vue-virtual-scroller: 2.0.0-beta.8 => 2.0.0-beta.8

Used Package Manager

pnpm

Validations

• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.