fix(ContentToc): Highlighter Positioning Differently in IOS Production

Environment

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

4.5.1

Reproduction

Sorry, all i had is pictures, the nuxt starter won't work properly in CodeSandbox and ContentToc work't work properly in StackBlitz, but you can visit this site via IOS and desktop device (Squeeze the page width into its minimun) to see what i am saying.

and this is what my code looks like for this specific ContentToc (PS: I don't think is the custom ui property that creates the problem because scroll with IOS device (Iphone specificly) under npm run dev mode is fine) :

<UContentToc
  v-model:open="isTocOpen"
  @move="isTocOpen = false"
  title="┃ 页面导航"
  color="neutral"
  :links="props.tocLink"
  highlight
  highlight-color="neutral"
  :ui="{
    root: 'absolute top-0 w-full backdrop-blur-2xl bg-white/60',
    container: '*:data-[slot=trigger]:cursor-pointer',
  }"
/>

Description

Use IOS device (Iphone specificly), scroll with the ContentToc open under production mode until the very end of the page, you will realize the highlighter deviate more and more as it progress. Scroll with IOS device (Iphone specificly) under npm run dev mode is fine, but when it comes to production it had problems.

Note: I tested other devices (other than android), they are fine.

Additional context

No response

Logs

Start with the ContentToc component and reproduce the reported page on an iPhone in production and development modes, comparing the highlighter position while scrolling to the end. Done means the highlighter stays aligned with the active content section in iOS production without regressing development mode.