Как скрыл скролл в iphone?

есть компонент

<script lang="ts" setup>

  const search = ref('');

  const isSearch = ref(false);

  const showSearch = (): void => {
    isSearch.value = true;

    document.body.classList.add('tw-overflow-hidden');
    document.documentElement.classList.add('tw-overflow-hidden');
  };

  const hideSearch = (): void => {
    isSearch.value = false;
    document.body.classList.remove('tw-overflow-hidden');
    document.documentElement.classList.remove('tw-overflow-hidden');
  };

</script>


<div
    :class="[
      isSearch ? 'tw-fixed tw-inset-0 tw-z-[1001] tw-px-4 tw-overflow-hidden tw-pt-24' : 'tw-relative',
    ]"
    class="tw-w-full "
    tabindex="-1"
  >
    <div
      v-if="isSearch"
      class="tw-absolute tw-inset-0 tw-bg-dark-700/40"
      @click.prevent="hideSearch"
    ></div>
    <div
      v-click-outside="hideSearch"
      :class="[
        isSearch ? 'xl:tw-pt-40' : '',
      ]"
      class="tw-relative"
    >
      <div
        class="tw-relative tw-w-full"
      >
        <input
          v-model="search"
          class="tw-w-full tw-h-full"
          type="text"
          @click="showSearch"
        />
      </div>
    </div>
  </div>

когда срабатывает клик по полю поиска переменная isSearch. становиться true, форма поиска поднимается вверх и для компов и андроидов все ок, скрол пропадает и оно вверху

на iphone overflow:hidden не срабатывает и скрол работает + форму поднимает вверх и она прячется