scroll-timeline目前不能用于生产环境的跨浏览器层叠滑动——仅Chrome/Edge支持，Firefox/Safari不支持，且无法fallback；需用IntersectionObserver降级实现滚动堆叠缩放。
滚动时卡片自动堆叠缩放，关键在 scroll-driven animation
纯 CSS 实现滚动驱动的卡片堆叠缩放，现在不用 JS 也能做——靠的是 @scroll-timeline 和 animation-timeline。但注意：截至 2026 年 9 月，Chrome 115+、Edge 115+ 原生支持，Firefox 和 Safari 尚未落地，生产环境必须加降级方案。
常见错误是试图用 position: sticky + transform 模拟滚动缩放，结果卡顿、错位、z-index 失效——因为 sticky 不触发层叠上下文重排，也无法绑定滚动进度。
- 必须用
scroll-timeline定义滚动范围（比如容器的block方向） - 动画本身要写在
@keyframes里，且只动transform和z-index，避免触发布局（top/left）或绘制（box-shadow） - 每张卡片需独立
animation-timeline，不能共用一个 timeline——否则所有卡片同步变化，失去“逐张入场”的堆叠感 - 缩放起点建议从
scale(0.8)开始，终点scale(1)；位移用translateY(-12px)→translateY(0)，配合z-index: 10→z-index: 30
没用 scroll-timeline 怎么 fallback？用 IntersectionObserver + inline style
当浏览器不支持 @scroll-timeline，JS 降级不是妥协，而是必须。但别写成全量监听 scroll 事件——性能爆炸。用 IntersectionObserver 观察每张卡片进入视口的时机，再动态设 style.transform 和 style.zIndex。
容易踩的坑：observer.observe() 后没做 unobserve，导致内存泄漏；或者给所有卡片统一设相同 z-index，堆叠顺序全乱。
立即学习“前端免费学习笔记（深入）”；
- 为每张卡片维护一个递减的
z-index数组，比如[50, 45, 40, 35]，首张最高，随滚动依次激活 - 缩放和位移值按
intersectionRatio线性插值：ratio 0 → scale 0.85, translateY -10px；ratio 1 → scale 1, translateY 0 - 务必加
will-change: transform到卡片元素上，否则 iOS Safari 滚动中缩放会掉帧 - 避免在回调里直接操作 classList 触发重排，全部走
element.style
transform 缩放后点击区域偏移？这是 iOS Safari 的老问题
iOS Safari 对 transform: scale() 后的点击热区判断有偏差，尤其缩放
解决方法不是加大点击区域，而是绕开坐标映射问题：
- 给卡片加
touch-action: manipulation，强制启用快速点击优化 - 缩放值下限卡死在
scale(0.88)，低于这个值 iOS 上交互明显不可靠 - 如果卡片内有按钮，不要把
transform写在按钮父容器上——改用transform: scale()直接作用于按钮自身，让点击区域与视觉一致 - 测试时务必真机连 Safari Web Inspector，看
Hit Test Regions是否覆盖预期区域
堆叠缩放卡顿？先查图层是否被意外合并
滚动中缩放卡顿，90% 是图层没分好。transform 本该走 GPU 合成，但如果父容器有 overflow: hidden 或 filter: blur()，浏览器会把整个子树合并在一个图层里，缩放就变成 CPU 绘制。
检查点很具体：
- 卡片父容器不能设
overflow: hidden——它会裁剪掉上移部分，也阻止图层分离 - 避免在卡片或其祖先上用
opacity: 0.99或backdrop-filter，这些会创建新层叠上下文并抑制硬件加速 - 卡片自己加
transform: translateZ(0)或will-change: transform，但别加在滚动容器上（会提前创建巨大图层） - 用 Chrome DevTools 的
Rendering > FPS Meter和Layers面板确认：每张卡片是否独立图层，且缩放时只有它们在 repaint
真正难调的是多卡片叠加时的图层竞争——比如 10 张卡片同时缩放，GPU 显存吃紧。这时候得砍数量，或改用虚拟滚动只渲染视口 ±1 屏内的卡片。
