Skip to content

fix(carousel): replace translate-based centering to fix nav button click misses#10296

Open
speixoto12 wants to merge 1 commit into
shadcn-ui:mainfrom
speixoto12:fix/carousel-click-detection
Open

fix(carousel): replace translate-based centering to fix nav button click misses#10296
speixoto12 wants to merge 1 commit into
shadcn-ui:mainfrom
speixoto12:fix/carousel-click-detection

Conversation

@speixoto12
Copy link
Copy Markdown

Summary

Fixes #10084

The carousel CarouselPrevious and CarouselNext buttons use top-1/2 -translate-y-1/2 to center themselves vertically in horizontal mode. However, shadcn's base Button styles include active:not-aria-[haspopup]:translate-y-px, which applies a 1px downward shift on click for tactile feedback.

Both utilities target the same CSS translate property. On click, the transform jumps from -50% to 1px, displacing the button by roughly half the carousel's height instead of 1px. This moves the button out from under the pointer before mouseup fires, causing clicks to silently fail — especially noticeable when clicking near the top edge of the button.

Fix

Replace top-1/2 -translate-y-1/2 with inset-y-0 my-auto on the nav buttons. Centering via auto margins instead of a transform frees up the translate property entirely, allowing the active press effect to work as originally intended — a subtle 1px shift with no conflict.

Why this approach

  • Minimal and targeted — one centering change, no new CSS properties or pseudo-elements
  • Preserves the existing press animationactive:translate-y-px now works correctly
    rather than being replaced or worked around
  • No side effects — margin-auto centering is fully equivalent for absolutely positioned
    elements with inset-y-0

Related PRs

Changes

  • apps/v4/registry/bases/base/ui/carousel.tsx
  • apps/v4/registry/bases/radix/ui/carousel.tsx
  • Rebuilt registry via pnpm registry:build

@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented Apr 4, 2026

@speixoto12 is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[bug]: Carousel demo in the docs

1 participant