diff --git a/components/molecule/accordion/src/AccordionItemPanel.js b/components/molecule/accordion/src/AccordionItemPanel.js
index 244da5939..bf7c0953f 100644
--- a/components/molecule/accordion/src/AccordionItemPanel.js
+++ b/components/molecule/accordion/src/AccordionItemPanel.js
@@ -52,27 +52,48 @@ const AccordionItemPanel = forwardRef(
         className={accordionItemPanelClassName}
         aria-disabled={disabled}
         style={{
-          overflowY: height > maxHeight && maxHeight !== 0 ? 'scroll' : 'hidden',
-          transition: `max-height ${animationDuration}ms ${
+          // grid-template-rows animation is layout-safe: siblings are pushed down
+          // correctly in all browsers including iOS Safari ≥16.4.
+          // max-height animation was replaced because it requires transform/will-change
+          // hacks to avoid Safari repaint corruption, and those hacks break document flow.
+          display: 'grid',
+          gridTemplateRows: values.includes(value) ? '1fr' : '0fr',
+          transition: `grid-template-rows ${animationDuration}ms ${
             values.includes(value) ? 'ease-out' : 'ease-in'
           }, opacity 0s linear ${values.includes(value) ? 0 : animationDuration}ms, border-top-width 0s linear ${
             values.includes(value) ? 0 : animationDuration
-          }ms`,
-          ...(values.includes(value) && {
-            maxHeight: maxHeight === 0 ? height : maxHeight
-          })
+          }ms`
         }}
         {...props}
       >
         <Poly
           as={as}
+          // overflow:hidden + min-height:0 must be on the direct grid child so that
+          // grid-template-rows:0fr can collapse it to zero height. These cannot live
+          // inside the !isFragment spread because isFragment is a function (always truthy),
+          // making !isFragment always false — the spread never executes.
+          style={{overflow: 'hidden', minHeight: 0}}
           {...{
             ...(!isFragment && {
               className: `${BASE_CLASS_ITEM_PANEL_CONTENT}Wrapper`
             })
           }}
         >
-          <div className={`${BASE_CLASS_ITEM_PANEL_CONTENT}WrapperRef`} ref={contentRef}>
+          <div
+            className={`${BASE_CLASS_ITEM_PANEL_CONTENT}WrapperRef`}
+            ref={contentRef}
+            style={{
+              // min-height: 0 is required for grid-template-rows: 0fr to collapse the child to zero
+              overflow: 'hidden',
+              minHeight: 0,
+              // maxHeight prop caps panel height and enables scroll — applied here (not on
+              // the outer grid wrapper) so it constrains content without affecting the animation
+              ...(maxHeight !== 0 && {
+                maxHeight,
+                overflowY: height > maxHeight ? 'scroll' : 'hidden'
+              })
+            }}
+          >
             {inject(children, [
               {
                 props: {
diff --git a/components/molecule/accordion/src/styles/index.scss b/components/molecule/accordion/src/styles/index.scss
index 249c88eb2..0b4932660 100644
--- a/components/molecule/accordion/src/styles/index.scss
+++ b/components/molecule/accordion/src/styles/index.scss
@@ -174,10 +174,10 @@ $base-class-item-panel: '#{$base-class-item}Panel';
 }
 
 #{$base-class-item-panel} {
-  overflow: hidden;
+  // overflow and collapse are handled by grid-template-rows animation (JS inline style).
+  // overflow: hidden lives on the inner WrapperRef child (required for 0fr collapse to work).
 
   &--collapsed {
-    max-height: 0;
     opacity: 0;
     border-bottom: 0;
   }