fix(select): remove scale animations from base select styles

[Hamed-Ajaj]

Summary

Remove scale-based animations from Base UI Select styles to prevent popup misalignment when opening or selecting a value.

This change significantly improves alignment consistency across styles (Lyra, Nova, Vega, Maia, Mira), though a small horizontal translation issue still exists in some cases.

What changed

• Removed zoom-in / zoom-out animations from Base UI Select content styles
• Kept fade and slide animations intact where applicable
• No changes to positioning logic or layout structure

Motivation

Scale transforms applied to the positioned element caused the popup to visually shift when its state changed (open/select). Removing these transforms fixes the majority of alignment issues and stabilizes the popup position.

Known limitation

There is still a small horizontal translation discrepancy in some styles that appears to originate from the Base UI Positioner alignment logic rather than from styling alone.

I experimented with align, alignOffset, and alignItemWithTrigger, but none fully resolved this without affecting expected behavior. For now, this PR focuses on the main regression caused by scale transforms.

Notes

If there is a more idiomatic way to handle this alignment within Base UI’s positioning system, I’d be happy to update the implementation based on maintainer or community guidance.

Fixes #9053

[vercel[bot]]

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

A member of the Team first needs to authorize it.

[Hamed-Ajaj]

@shadcn

I removed the scale (zoom-in / zoom-out) animations from the Base UI Select styles because they caused visible popup misalignment when opening or selecting a value. This fixes most of the issue across styles.

There is still a small horizontal offset in some themes that seems to come from Base UI’s Positioner alignment rather than styling alone. I tried align, alignOffset, and alignItemWithTrigger, but couldn’t fully resolve it without changing the expected placement behavior.

If you have a preferred or more idiomatic way to handle this within Base UI’s positioning system, I’d appreciate the guidance.

[Hamed-Ajaj]

I also tried fixing this in several ways by adjusting styles and Positioner props (including alignment options and offsets), but none fully resolved the issue across all styles.

From debugging in DevTools, it looks like the horizontal (left) positioning calculated by Base UI’s Positioner is slightly off in some cases, which then becomes visible depending on the style (padding, borders, font size, etc.). That’s why the issue appears more clearly in certain themes.

Happy to adjust this further if there’s a recommended way to handle this within the Positioner logic.

[joesanchezjr]

thanks for taking a look at this! it looks like there is still an alignment issue when removing those animations - this is similar to the 4th screenshot in the original issue where I tried removing tw-animate-css - just wanted to add this for some visual context to your comments above

[Hamed-Ajaj]

thanks @joesanchezjr ,

yup this was the problem that i couldn't fix it,

if you change also the style of the select for example mira lira or vega, the position of the popup will change

it's a weird problem.

[atomiks]

The problem relating to misalignment when using transform: scale() specifically will be fixed in Base UI in the next version (though it probably won't be released until next month): https://github.com/mui/base-ui/pull/3532

[Hamed-Ajaj]

thanks @atomiks