perf(chat): 折叠块跳过子树渲染,根治窗口拖拽卡顿

- 极简模式(0fr)与堆叠/思维链(max-height:0)折叠只裁视觉,DOM 仍全量
  参与布局,几千节点的步骤组在窗口拖拽时逐帧重排导致卡顿;
  折叠态改为 content-visibility:hidden + contain-intrinsic-size:0
  跳过整个子树渲染
- 过渡列表加入 content-visibility + transition-behavior:allow-discrete,
  隐藏翻转延迟到收起动画结束后生效,展开立即恢复;不支持的引擎
  退化为立即跳过,动画本体不受影响
- 删除 .stacked-block .collapsible-content 冗余 transition 规则:
  特异性更高且漏写 content-visibility,曾致收起时内容瞬间消失、
  块高瞬间坍塌而外壳慢一拍
- 堆叠块收放改为纯容器裁切、不淡出,与极简模式一致
This commit is contained in:
JOJO 2026-07-27 23:58:55 +08:00
parent 8741edec18
commit f1fcba1da0
2 changed files with 33 additions and 4 deletions

View File

@ -1216,6 +1216,18 @@ onBeforeUnmount(() => {
.steps-wrapper { .steps-wrapper {
overflow: hidden; overflow: hidden;
min-height: 0; min-height: 0;
/* content-visibility grid 0.3s
展开时立即恢复渲染不支持的引擎退化为收起时立即跳过 */
transition: content-visibility 0.3s;
transition-behavior: allow-discrete;
}
/* 0fr DOM
几千节点的步骤组会在窗口拖拽时逐帧重排导致卡顿
隐藏翻转由上方过渡延迟到收起动画结束后生效 */
.steps-container:not(.show) .steps-wrapper {
content-visibility: hidden;
contain-intrinsic-size: 0;
} }
.steps-wrapper.height-limited { .steps-wrapper.height-limited {

View File

@ -1364,9 +1364,15 @@ body[data-theme='dark'] .collapsible-header:hover {
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
opacity: 0; opacity: 0;
/* content-visibility 也进过渡列表收起动画播完才跳过子树渲染
展开时立即恢复渲染离散属性的方向性插值收起动画得以完整呈现 */
transition: transition:
max-height 260ms cubic-bezier(0.4, 0, 0.2, 1), max-height 260ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 220ms cubic-bezier(0.4, 0, 0.2, 1); opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),
content-visibility 260ms;
/* 让离散属性可过渡不支持的引擎忽略此属性退化为收起时立即跳过渲染
max-height/opacity 动画本体不受影响 */
transition-behavior: allow-discrete;
/* 始终隐藏滚动条,避免堆叠模式展开时闪现 */ /* 始终隐藏滚动条,避免堆叠模式展开时闪现 */
scrollbar-width: none; scrollbar-width: none;
-ms-overflow-style: none; -ms-overflow-style: none;
@ -1377,6 +1383,15 @@ body[data-theme='dark'] .collapsible-header:hover {
display: none; display: none;
} }
/* 折叠态跳过整个子树渲染max-height:0 只裁视觉DOM 仍全量参与布局
大步骤组/长思维链会在窗口拖拽时逐帧重排导致卡顿
隐藏翻转由上方过渡延迟到收起动画结束后生效展开时立即恢复渲染
rAF 测量强制同步布局取真实高度不受影响 */
.collapsible-block:not(.expanded) .collapsible-content {
content-visibility: hidden;
contain-intrinsic-size: 0;
}
.collapsible-block.expanded .collapsible-content { .collapsible-block.expanded .collapsible-content {
max-height: var(--collapse-max, 600px); max-height: var(--collapse-max, 600px);
overflow-y: auto; overflow-y: auto;
@ -1550,10 +1565,12 @@ body[data-theme='dark'] .more-icon {
transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
} }
/* 堆叠块收起/展开不做淡出内容保持不透明由收缩的容器自然裁切与极简模式一致
注意不要再给 .stacked-block .collapsible-content 重声明 transition
它会以更高特异性覆盖 .collapsible-content 基础规则 content-visibility 过渡
曾因漏写 content-visibility 导致收起时内容瞬间消失块高瞬间坍塌 */
.stacked-block .collapsible-content { .stacked-block .collapsible-content {
transition: opacity: 1;
max-height 260ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
} }
.progress-indicator { .progress-indicator {