我正在使用Nuxt 3进行一个项目，并创建了一个倒计时组件。倒计时代码是一个简单的setInterval，其周围带有Nuxt ClientOnly标记，以防止水合不匹配错误。CountdownItem仅显示其属性值。
倒计时模板：

<div>
    <h2 class="w-full text-center uppercase">
      {{ $t("message.countdownTitle") }}
    </h2>
    <ClientOnly>
      <div class="flex justify-center w-full gap-x-1">
        <CountdownItem :number="days" text="days" />
        <CountdownItem :number="hours" text="hours" />
        <CountdownItem :number="minutes" text="minutes" />
        <CountdownItem :number="seconds" text="seconds" />
      </div>
    </ClientOnly>
  </div>

倒计时脚本

<script setup lang="ts">
import type { StrapiCountdown } from "~/types/api";
const { findOne } = useStrapi();

const { data: countdownData } = await useAsyncData("countdown", () =>
  findOne<StrapiCountdown>("countdown")
);

const countDownDate = new Date(
  countdownData.value?.data.attributes.date as string
).getTime();

var now = new Date().getTime();
var distance = countDownDate - now;

const days = ref<number>(Math.floor(distance / (1000 * 60 * 60 * 24)));
const hours = ref<number>(
  Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
);
const minutes = ref<number>(
  Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
);
const seconds = ref<number>(Math.floor((distance % (1000 * 60)) / 1000));

setInterval(setCountdownVariables, 1000);

function setCountdownVariables() {
  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  days.value = Math.floor(distance / (1000 * 60 * 60 * 24)) || 0;
  hours.value =
    Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) || 0;
  minutes.value = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)) || 0;
  seconds.value = Math.floor((distance % (1000 * 60)) / 1000) || 0;
}
</script>

CountdownItem模板

<div
    class="flex flex-col items-center justify-center flex-none w-20 h-20 bg-opacity-60 rounded-2xl bg-lightPurple"
  >
    <span class="mr-2 text-4xl font-bold antialiased">{{ number }}</span>
    <span class="text-xs font-bold">{{ text }}</span>
  </div>

代码在除iOS Safari之外的所有设备上都能正常工作。在iOS上，它创建了这个视觉错误：

当文本更新为不同的数字时会发生这种情况。前一个数字的边界作为视觉伪影被留下。
如果有帮助，字体为Prompt Bold Italic。