fix: (motion) Resolve Safari overflow rendering issue in Collapse component

[akatrukhin]

In Safari where the overflow property was not being correctly applied during collapse/expand animations.
Safari ignores shorthand overflow: 'hidden' or { overflow } in keyframes as result visible collapsed content.
Issue: #32912

Fix

The overflow property has been split into overflowX and overflowY, both set to hidden, ensuring that Safari correctly handles the overflow behavior during animations.

Tested on:
Safari
Chrome
Firefox
Edge

No regressions were observed on other browsers.

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-accordion Accordion (including children components)	104.529 kB 32.097 kB	104.594 kB 32.106 kB	65 B 9 B
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	218.317 kB 63.258 kB	218.382 kB 63.267 kB	65 B 9 B
react-components react-components: entire library	1.1 MB 272.007 kB	1.1 MB 272.017 kB	65 B 10 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	69.14 kB 20.137 kB
react-components react-components: FluentProvider & webLightTheme	44.447 kB 14.59 kB
react-portal-compat PortalCompatProvider	8.39 kB 2.64 kB
react-timepicker-compat TimePicker	107.387 kB 35.758 kB

_{🤖 This report was generated against 213771402438cb4e594bdd7b37b6dcbe77136447}

[fredboyle]

@akatrukhin Do we have an automated visual regression test for this? It would be good to have to avoid missing issues across browsers.

[fabricteam]

Perf Analysis (@fluentui/react-components)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender	35	35	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	653	620	5000
Button	mount	301	314	5000
Field	mount	1155	1143	5000
FluentProvider	mount	713	730	5000
FluentProviderWithTheme	mount	79	89	10
FluentProviderWithTheme	virtual-rerender	35	35	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	76	75	10
MakeStyles	mount	852	868	50000
Persona	mount	1782	1730	5000
SpinButton	mount	1452	1357	5000
SwatchPicker	mount	1729	1688	5000

[fabricteam]

🕵🏾‍♀️ visual regressions to review in the fluentuiv9 Visual Regression Report

Avatar Converged 3 screenshots

Image Name	Diff(in Pixels)	Image Type
Avatar Converged.Badge Mask RTL.chromium.png	3	Changed
Avatar Converged.size+inactive+badge.chromium.png	1	Changed
Avatar Converged.badgeMask.chromium.png	49	Changed

Drawer 2 screenshots

Image Name	Diff(in Pixels)	Image Type
Drawer.overlay drawer full.chromium.png	1147	Changed
Drawer.Full Overlay Dark Mode.chromium.png	984	Changed

[akatrukhin]

@akatrukhin Do we have an automated visual regression test for this? It would be good to have to avoid missing issues across browsers.

Fluent UI has automated visual regression tests, but we don't have them for this component. As far as I know, these tests won't detect issues in Safari

[fredboyle]

@akatrukhin Do we have an automated visual regression test for this? It would be good to have to avoid missing issues across browsers.

Fluent UI has automated visual regression tests, but we don't have them for this component. As far as I know, these tests won't detect issues in Safari

If there isn't a visual regression test for this component then we should have one. We're likely using Playwright for testing which does have the ability to check Safari specifically. If there's a blocker for that let's document it so we can investigate a path to a solution.

Thanks.

[mahipalsingh-capsitech]

You simply write like this---

const toOpacity = 1, fromHeight = '0', toHeight = ${element.scrollHeight}px`, overflowHidden = 'hidden';

const enterKeyframes = [
{ opacity: 0, maxHeight: fromHeight, overflowX: overflowHidden, overflowY: overflowHidden },
{ opacity: toOpacity, maxHeight: toHeight, offset: 0.9999 },
{ opacity: toOpacity, maxHeight: 'unset' }
];

const exitKeyframes = [
{ opacity: toOpacity, maxHeight: toHeight },
{ opacity: 0, maxHeight: fromHeight }
];
`