base-ui icon indicating copy to clipboard operation
base-ui copied to clipboard

Published 20 hours ago • verified publisher icon mui

[collapsible] Layout shift when using CSS transitions and the `Panel` is initially open

Open mj12albert opened this issue 1 year ago • 3 comments

only the one using CSS transitions is consistently flagged for CLS here

https://deploy-preview-577--base-ui.netlify.app/experiments/collapsible-cls

Screenshot 2024-10-25 at 9 30 35 PM

mj12albert avatar Oct 17 '24 10:10 mj12albert

testing the /components/react-menu page:

master branch vs https://github.com/mui/base-ui/pull/577, there is basically no difference

The Demo collapsible uses CSS animations and doesn't get flagged for CLS

master Screenshot 2024-10-25 at 9 32 11 PM

after changes Screenshot 2024-10-25 at 9 33 20 PM

mj12albert avatar Oct 25 '24 13:10 mj12albert

@michaldudak Do you still reproduce this on the Demo component's Collapsible? I don't get it even on master anymore, but using CSS transitions, the minimal example in experiments is quite consistent

mj12albert avatar Oct 28 '24 06:10 mj12albert

No, it seems it somehow was fixed in the meantime. Lighthouse doesn't report layout shift problems anymore on master. There still is a layout shift when using transitions, but it's not flagged as an issue.

michaldudak avatar Oct 28 '24 08:10 michaldudak