From b7daa29de8f9ae507191fdf6a38f8e69352717c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B8=85=E5=87=A4?= <qingf622@outlook.com>
Date: Mon, 14 Sep 2026 00:08:32 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix(ui):=20=E7=AD=89=E5=BE=85=E5=AD=90?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=AE=9A=E4=BD=8D=E5=90=8E=E5=90=AF=E5=8A=A8?=
 =?UTF-8?q?=E8=BF=9B=E5=85=A5=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dropdown-menu/DropdownMenuSubContent.vue      | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/dropdown-menu/DropdownMenuSubContent.vue b/src/components/dropdown-menu/DropdownMenuSubContent.vue
index ddd7d6d..a52d660 100644
--- a/src/components/dropdown-menu/DropdownMenuSubContent.vue
+++ b/src/components/dropdown-menu/DropdownMenuSubContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui'
-import { computed, ref, type HTMLAttributes } from 'vue'
+import { computed, ref, watch, type HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import {
   DropdownMenuSubContent,
@@ -21,6 +21,17 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 const menuArea = ref<InstanceType<typeof MenuScrollArea>>()
 const currentElement = computed(() => menuArea.value?.viewportElement?.closest<HTMLElement>('[data-slot="dropdown-menu-sub-content"]') ?? undefined)
 const { alignOffset, ready } = useSubmenuAlignment(currentElement)
+// Start the entrance on a fresh frame after mounting and placement have settled.
+// Otherwise a long list can consume the animation before its first visible paint.
+const motionReady = ref(false)
+watch(ready, (value, _, cleanup) => {
+  motionReady.value = false
+  if (!value) return
+  let frame = requestAnimationFrame(() => {
+    frame = requestAnimationFrame(() => { motionReady.value = true })
+  })
+  cleanup(() => cancelAnimationFrame(frame))
+}, { flush: 'post' })
 </script>
 
 <template>
@@ -30,7 +41,7 @@ const { alignOffset, ready } = useSubmenuAlignment(currentElement)
       v-bind="forwarded"
       :align-offset="props.alignOffset ?? alignOffset"
       :style="{ visibility: ready ? undefined : 'hidden' }"
-      :class="cn(menuWidthClass, menuContentClass, menuAnchoredMotionClass, 'flex min-h-0 flex-col overflow-hidden max-h-(--reka-dropdown-menu-content-available-height) origin-(--reka-dropdown-menu-content-transform-origin)', props.class)"
+      :class="cn(menuWidthClass, menuContentClass, menuAnchoredMotionClass, 'flex min-h-0 flex-col overflow-hidden max-h-(--reka-dropdown-menu-content-available-height) origin-(--reka-dropdown-menu-content-transform-origin)', props.class, !motionReady && 'animate-none! opacity-0')"
     >
       <MenuScrollArea ref="menuArea">
         <slot />

From ffbd5b0ed65bd6aca8e74e466571b8326478fd4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B8=85=E5=87=A4?= <qingf622@outlook.com>
Date: Mon, 14 Sep 2026 00:14:07 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix(ui):=20=E5=AD=90=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90=E6=B5=8B=E9=87=8F=E6=8E=92=E9=99=A4=E5=86=85?=
 =?UTF-8?q?=E9=83=A8=E6=BB=9A=E5=8A=A8=E8=B7=9D=E7=A6=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/useSubmenuAlignment.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/lib/useSubmenuAlignment.ts b/src/lib/useSubmenuAlignment.ts
index ec26946..13b5bb5 100644
--- a/src/lib/useSubmenuAlignment.ts
+++ b/src/lib/useSubmenuAlignment.ts
@@ -17,8 +17,15 @@ export function useSubmenuAlignment(content: Readonly<Ref<HTMLElement | undefine
         // Opening scale animation must not influence layout measurements.
         const scale = bounds.width / element.offsetWidth
         if (scale > 0) {
+          // Rects include viewport scrolling; alignment needs the row's position
+          // in the unscrolled content, including any nested scroll containers.
+          let scrollOffset = 0
+          for (let parent = first.parentElement; parent; parent = parent.parentElement) {
+            scrollOffset += parent.scrollTop
+            if (parent === element) break
+          }
           alignOffset.value = trigger.offsetHeight / 2
-            - (first.getBoundingClientRect().top - bounds.top) / scale - first.offsetHeight / 2
+            - (first.getBoundingClientRect().top - bounds.top) / scale - scrollOffset - first.offsetHeight / 2
         }
       }
       ready.value = true