[drawer] Animating `padding-bottom` with transition causes performance issues

[isacrasmusson]

Feature request

Summary

The Drawer component currently animates padding-bottom using CSS transitions, which isn't hardware-accelerated. Using transform: translateY() would improve performance on Android through GPU acceleration.

Examples in other libraries

https://github.com/emilkowalski/vaul
https://github.com/viliket/pure-web-bottom-sheet

Motivation

Optimizing the drawer animation would improve mobile performance.

[linear]

BAS-382

[jijiseong]

From what I can see in the style inspector, Base UI is already using transform: translateY().
(ref. https://base-ui.com/react/components/drawer#position)
Could you point me to where it’s not applied?

[isacrasmusson]

From what I can see in the style inspector, Base UI is already using transform: translateY(). (ref. https://base-ui.com/react/components/drawer#position) Could you point me to where it’s not applied?

You're right. I was mistaken, I must have misread the styles when I opened the issue. Apologies for the confusion.