diff --git a/src/components/settings/NavItem.vue b/src/components/settings/NavItem.vue
index a80c14b..075475c 100644
--- a/src/components/settings/NavItem.vue
+++ b/src/components/settings/NavItem.vue
@@ -26,6 +26,7 @@ const rowClass = 'w-full justify-start gap-2.5 pl-3.5! pr-3! font-[430] tracking
 
 <template>
   <Button
+    data-settings-nav-item
     variant="ghost"
     :class="[rowClass, active && 'bg-sidebar-accent text-foreground!']"
   >
diff --git a/src/components/sidebar/SidebarContent.vue b/src/components/sidebar/SidebarContent.vue
index 7d2a95e..02fa640 100644
--- a/src/components/sidebar/SidebarContent.vue
+++ b/src/components/sidebar/SidebarContent.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
+import { onBeforeUnmount } from 'vue'
 import { cn } from '#/lib/utils'
+import { createScrollHover } from '#/lib/scroll-hover'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
 }>()
+
+const scrollHover = createScrollHover()
+
+onBeforeUnmount(scrollHover.dispose)
 </script>
 
 <template>
@@ -12,6 +18,9 @@ const props = defineProps<{
     data-slot="sidebar-content"
     data-sidebar="content"
     :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+    @pointermove="scrollHover.pointerMove"
+    @pointerleave="scrollHover.pointerLeave"
+    @scroll.passive="scrollHover.scroll"
   >
     <slot />
   </div>
diff --git a/src/lib/scroll-hover.ts b/src/lib/scroll-hover.ts
new file mode 100644
index 0000000..6ad1bdd
--- /dev/null
+++ b/src/lib/scroll-hover.ts
@@ -0,0 +1,53 @@
+export function createScrollHover() {
+  let pointer: { x: number, y: number } | undefined
+  let hovered: HTMLElement | undefined
+  let frame: number | undefined
+
+  function setHovered(next: HTMLElement | undefined): void {
+    if (hovered === next)
+      return
+    hovered?.removeAttribute('data-pointer-hover')
+    next?.setAttribute('data-pointer-hover', '')
+    hovered = next
+  }
+
+  function sync(scope: HTMLElement): void {
+    if (!pointer)
+      return setHovered(undefined)
+    const hit = scope.ownerDocument.elementFromPoint(pointer.x, pointer.y)
+    const target = hit?.closest<HTMLElement>('[data-settings-nav-item]')
+    setHovered(target && scope.contains(target) ? target : undefined)
+  }
+
+  function scheduleSync(scope: HTMLElement): void {
+    if (frame !== undefined)
+      return
+    frame = requestAnimationFrame(() => {
+      frame = undefined
+      sync(scope)
+    })
+  }
+
+  function pointerMove(event: PointerEvent): void {
+    pointer = { x: event.clientX, y: event.clientY }
+    sync(event.currentTarget as HTMLElement)
+  }
+
+  function pointerLeave(): void {
+    pointer = undefined
+    setHovered(undefined)
+  }
+
+  function scroll(event: Event): void {
+    scheduleSync(event.currentTarget as HTMLElement)
+  }
+
+  function dispose(): void {
+    if (frame !== undefined)
+      cancelAnimationFrame(frame)
+    frame = undefined
+    setHovered(undefined)
+  }
+
+  return { pointerMove, pointerLeave, scroll, dispose }
+}
diff --git a/src/style.css b/src/style.css
index 97ff2b8..c115aa8 100644
--- a/src/style.css
+++ b/src/style.css
@@ -396,7 +396,19 @@
     background-color: var(--ui-pressed);
     transition-duration: 40ms;
   }
-
+  /* Chromium can retain the old :hover target during compositor scrolling.
+     SidebarContent explicitly hit-tests NavItem hover after scroll events. */
+  [data-sidebar="content"] [data-button][data-variant="ghost"][data-settings-nav-item]::before {
+    transition-property: scale;
+  }
+  @media (hover: hover) {
+    [data-sidebar="content"] [data-button][data-variant="ghost"][data-settings-nav-item]:hover::before {
+      background-color: transparent;
+    }
+  }
+  [data-sidebar="content"] [data-button][data-variant="ghost"][data-settings-nav-item][data-pointer-hover]::before {
+    background-color: var(--btn-ghost-hover);
+  }
   /* ── Button: BRAND — solid scheme-color CTA (e.g. chat Send) ─────────────────
      Fill + hover/press live on a ::before shell (same model as primary/ghost),
      so the press shrinks only the fill and the glyph never moves. Press scale