CSS 折叠引发的 scrollHeight 异常 —— 一次 Blink 引擎的诡异 Bug

CSS 折叠动画导致 scrollHeight 异常的排查与解决 ------ Blink 引擎边界 Bug 分析

前言

在日常开发中，可能通过 max-height、opacity 与 overflow:hidden 实现可折叠区域的动画效果。但在超长内容的场景下，这套方案在 Chrome/Edge 中可能引发滚动容器的 scrollHeight 计算异常，导致页面底部出现大片空白。本文记录了一次真实项目的排查过程，分析了 Blink 引擎的边界 Bug，并给出两种可行解决方案及注意事项，供遇到类似问题的开发者参考。

现象描述

外层是一个滚动容器，用于渲染消息列表。列表中有一个答案消息组件，结构如下：

思考步骤（支持折叠，内含极长文本）
内容

折叠状态 CSS：

css 复制代码

.thinking-content-collapse {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.thinking-content {
    transition: all .3s ease;
}

不使用 display: none 是为了在展开/折叠时保留不透明度过渡动画。

普通情况表现正常：

折叠/展开触发顺畅
滚动容器的 scrollHeight 随内容高度动态更新

异常情况 ：

当思考步骤高度约 18000px 、内容高度约 2000px 时，折叠状态下滚动容器底部出现大片空白，且 scrollHeight 诡异地为 ~12000px（与预期 0 不符）。

排查过程与原因分析

排查发现，这是 Blink 引擎（Chrome / Edge） 在处理特定 CSS 组合时的边界 Bug：

当元素同时满足 max-height: 0 + overflow: hidden + opacity: 0 时，scrollHeight 的计算未正确应用 max-height 限制，内部内容高度泄漏到父级滚动容器的 scrollHeight 中，造成虚高。

根本原因与 Blink 的布局计算路径有关：在 opacity 为 0 的合成层切换过程中，max-height 约束被跳过，导致浏览器仍按内容实际高度参与滚动区域计算。

解决方案与对比

Claude Code 给出两种可行修复方案，均已验证有效：

contain: layout
- 作用于 .thinking-content，隔离内外布局计算。
- 优点：语义清晰。
- 缺点：兼容性受限（旧版浏览器不支持）。
transform: scaleY(0)（最终采用）
- 作用于 .thinking-content-collapse，强制创建合成层，使其走独立布局路径。
- 注意：若原有 transition 包含 all，需改为显式指定属性，例如：
  css 复制代码
```
.thinking-content {
    transition: opacity .3s ease, max-height .3s ease;
}
```
  以避免 transform 也被加入动画，产生非预期的形变效果。

总结与思考

该 Bug 属于 Blink 的边界情况，常规内容高度不会触发，但在超长文本折叠场景需特别注意。
使用 transform 改变视觉尺寸可绕过布局计算路径，是解决此类问题的可靠方法之一。
底层布局与合成层的交互机制仍值得深入研究，尤其是 opacity 与 max-height 的组合对 scrollHeight 的影响。

如果你在实际项目中遇到类似的滚动高度异常，或对 Blink 引擎的布局计算原理有更深入的理解，欢迎在评论区交流，一起剖析浏览器背后的故事。