折叠区用 content-visibility 高度乱跳怎么修

现象#

给 FAQ 与评论区加 content-visibility: auto 后滚动条位置乱跳，CLS 从 0.03 升到 0.21。

原因#

• 该属性在元素进入视口前用 contain-intrinsic-size 估算高度，估小了就把下方内容往上推
• 折叠面板默认 display: none 不参与布局，展开瞬间才计算高度，与惰性渲染冲突
• 只写了 content-visibility 没写 contain-intrinsic-size，浏览器按 0 占位
• 折叠区内的图片没写固定宽高比，展开加载后才算出高度，再重排一次

处理步骤#

1. 只给视口外的长列表加 content-visibility: auto，折叠面板本身不要加
2. 必须加时同时声明 contain-intrinsic-size: auto 600px，给接近真实的高度
3. 折叠区改用 hidden 属性配合 content-visibility: hidden，保留占位尺寸
4. 折叠区里的图片写死 aspect-ratio，避免展开时二次重排
5. 用 Layout Shift Regions 重新录一遍滚动过程，确认没有紫色闪烁

验收标准#

整页滚动时 Layout Shift Regions 无闪烁，CLS 回到 0.05 以下，滚动条位置稳定。