fix: resolve Safari overflow rendering issue in collapse animations

Safari was not correctly applying the `overflow` property during collapse/expand animations, causing visual issues. This fix splits the shorthand `overflow` into `overflowX` and `overflowY`, which ensures proper rendering across all browsers.

change/@fluentui-react-motion-components-preview-e172abef-b853-45cb-a027-414535ffd1cd.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Resolve Safari overflow rendering issue in Collapse component",
+  "packageName": "@fluentui/react-motion-components-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.ts

@@ -11,23 +11,24 @@ const collapseMotion: PresenceMotionFn<{ animateOpacity?: boolean }> = ({ elemen
   const toOpacity = 1;
   const fromHeight = '0'; // Could be a custom param in the future: start partially expanded
   const toHeight = `${element.scrollHeight}px`;
-  const overflow = 'hidden';
+  const overflowHidden = 'hidden';
 
   const duration = motionTokens.durationNormal;
   const easing = motionTokens.curveEasyEaseMax;
 
   const enterKeyframes = [
-    { opacity: fromOpacity, maxHeight: fromHeight, overflow },
+    // over
+    { opacity: fromOpacity, maxHeight: fromHeight, overflowX: overflowHidden, overflowY: overflowHidden },
     // Transition to the height of the content, at 99.99% of the duration.
-    { opacity: toOpacity, maxHeight: toHeight, offset: 0.9999, overflow },
+    { opacity: toOpacity, maxHeight: toHeight, offset: 0.9999, overflowX: overflowHidden, overflowY: overflowHidden },
     // On completion, remove the maxHeight because the content might need to expand later.
     // This extra keyframe is simpler than firing a callback on completion.
-    { opacity: toOpacity, maxHeight: 'unset', overflow },
+    { opacity: toOpacity, maxHeight: 'unset', overflowX: overflowHidden, overflowY: overflowHidden },
   ];
 
   const exitKeyframes = [
-    { opacity: toOpacity, maxHeight: toHeight, overflow },
-    { opacity: fromOpacity, maxHeight: fromHeight, overflow },
+    { opacity: toOpacity, maxHeight: toHeight, overflowX: overflowHidden, overflowY: overflowHidden },
+    { opacity: fromOpacity, maxHeight: fromHeight, overflowX: overflowHidden, overflowY: overflowHidden },
   ];
 
   return {