Safari中CSS Transition卡顿求助：可折叠表格折叠动画异常

我之前也踩过Safari表格动画的坑，你的情况特别典型——展开流畅但折叠卡顿，核心原因是当前CSS同时过渡多个触发布局重排的属性（line-height、padding、border），Safari的WebKit引擎在处理表格这类特殊布局元素时，叠加的重排操作会导致帧丢失，直接表现为卡顿。

问题根源拆解 #

你现在的实现是通过修改<th>/<td>的行高、内边距和边框来实现折叠效果，这些属性每一次变化都会让浏览器重新计算整个表格的布局。折叠时所有行的单元格同时触发布局更新，Safari没法高效处理这种批量的布局变更；而展开时是从0状态恢复，计算路径相对简单，所以表现正常。

最优解决方案：容器级max-height过渡 #

最稳妥的修复方式是把动画从单元格级改成容器（<tbody>）级的max-height过渡，这个属性在Safari中渲染更高效，且只触发容器的重排，避免批量单元格布局变化带来的性能损耗。

修改后的完整CSS代码

* {
   font-family: sans-serif;
   padding: 0;
   margin: 0;
}
#Products {
   margin: 0 auto;
   border-spacing: 0;
}
#Products th,
#Products td {
   border-right: 1px solid black;
   border-bottom: 1px solid black;
   background-color: white;
   width: calc((100% - 180px) / 3);
   min-width: 200px;
   padding: 9px;
}
#Products th:first-child,
#Products td:first-child {
   width: 180px;
}
#Products th {
   background-color: #555;
   color: white;
}
#Products th:first-child {
   text-align: left;
}
#Products th:last-child,
#Products td:last-child {
   border-right: none;
}
#Products .SpecCatHeader * {
   background-color: black;
   font-weight: bold;
   color: white;
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
}
/* 关键修改：给tbody容器添加过渡 */
#Products .SpecCat {
   transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
   max-height: 2000px; /* 设置一个比实际内容高度大的值即可 */
   overflow: hidden;
}
#Products .SpecCat.Closed {
   opacity: 0;
   max-height: 0;
}
/* 移除原来对th/td的过渡和Closed状态的布局修改 */

为什么这个方案有效？

• max-height过渡只作用于<tbody>容器，浏览器只需计算容器的高度变化，不需要逐个处理单元格的布局
• overflow: hidden会自动隐藏容器内超出部分，自然实现单元格的“折叠”效果
• 保留opacity过渡保证视觉上的平滑过渡，和原效果完全一致

备选优化方案（保留原动画逻辑） #

如果你想保留原有的单元格属性过渡（比如需要更精细的动画细节），可以尝试以下两个小调整：

1. 提前提示Safari优化渲染：给单元格添加will-change属性，让浏览器提前准备渲染资源

   #Products .SpecCat th,
   #Products .SpecCat td {
     will-change: line-height, padding;
     transition: line-height 0.3s, padding-top 0.3s, padding-bottom 0.3s;
   }
   

2. 避免边框突变：把折叠状态下的border: none改成border-color: transparent，减少布局变化的幅度

   #Products .SpecCat.Closed th,
   #Products .SpecCat.Closed td {
     opacity: 0;
     line-height: 0;
     padding-top: 0;
     padding-bottom: 0;
     border-color: transparent; /* 替换border: none */
   }
   

测试验证 #

修改后在Safari 16.2中测试，折叠动画应该会和其他浏览器一样流畅，同时原有的交互逻辑（JS代码完全不需要修改）也能正常运行。

内容的提问来源于stack exchange，提问作者mph