不能，scroll-timeline 无法直接驱动 backdrop-filter 缩放；浏览器不支持将其或 transform: scale() 作为 scroll-driven 动画的可动画属性，需通过自定义属性 --scale 间接控制，并分层实现毛玻璃与缩放。
scroll-timeline 能直接驱动毛玻璃缩放吗？不能
直接用 scroll-timeline 控制 backdrop-filter 缩放会失败——浏览器目前（Chrome 125+、Safari 18 技术预览版）**不支持将 backdrop-filter 或 transform: scale() 作为 @keyframes 中的可动画属性参与 scroll-driven 动画**。你看到的“无效”或“卡顿”，本质是 CSS 动画引擎跳过了这些属性，只对 opacity、transform: translate() 等白名单属性生效。
可行路径只有一条：用 scroll-timeline 驱动一个中间状态（比如自定义属性 --scale），再通过 calc() 或 attr()（后者暂不支持数值计算）间接影响样式。但注意：backdrop-filter 本身不接受 CSS 变量，所以毛玻璃强度（blur(8px)）无法动态变化；缩放必须靠 transform: scale()，而它又得和毛玻璃共存于同一元素上。
移动端标题栏缩放 + 毛玻璃的最小可行组合
核心是分层：毛玻璃效果用固定定位的伪元素实现，缩放用主标题元素独立控制。两者通过 scroll-timeline 同步驱动，但动画属性分离。
-
scroll-timeline必须绑定在容器上（如<main>），且需显式设置scroll-timeline-axis: y - 标题栏使用
position: sticky或position: fixed，顶部锚点设为top: 0 - 毛玻璃层用
::before伪元素，backdrop-filter: blur(12px)+background: rgba(255,255,255,0.1)，z-index: -1 - 缩放仅作用于文字容器（如
<h1>），用transform: scale(var(--scale, 1))，由@keyframes更新--scale
@keyframes scale-title {
0% { --scale: 1; }
100% { --scale: 0.85; }
}
<p>.title-bar {
position: sticky;
top: 0;
z-index: 100;
scroll-timeline: --title-tl y;
animation: scale-title 1s linear;
animation-timeline: --title-tl;
}</p><p>.title-bar::before {
content: "";
position: absolute;
inset: 0;
backdrop-filter: blur(12px);
background: rgba(255,255,255,0.1);
z-index: -1;
}</p><p>.title-bar h1 {
transform: scale(var(--scale, 1));
transform-origin: center;
}为什么 iOS Safari 上毛玻璃常失效？
iOS Safari 对 backdrop-filter 有硬性限制：必须满足「元素有明确的 stacking context」且「父容器不能是 overflow: hidden 或 clip-path 截断区域」。常见踩坑点：
立即学习“前端免费学习笔记（深入）”；
- 标题栏父容器用了
overflow: hidden（比如为了圆角裁剪），毛玻璃直接消失 - 未给标题栏加
isolation: isolate或will-change: transform，导致渲染层未提升 -
backdrop-filter和transform同时存在时，iOS 旧版本（≤17.4）可能降级为纯透明背景 - 滚动容器不是
<body>而是内部<div class="scroller">，需确保该容器设置了-webkit-overflow-scrolling: touch（仅限 iOS）
验证方法：临时删掉 transform，只留 backdrop-filter，看毛玻璃是否出现。若出现，说明是合成层冲突；若不出现，检查父容器 overflow 和 isolation。
scroll-timeline 兼容性补丁怎么写？
Chrome 和 Safari 技术预览支持 scroll-timeline，但 Firefox 完全不支持，Android WebView 大部分不支持。不能只靠它驱动核心交互。
- 用
IntersectionObserver+requestAnimationFrame回退：监听标题栏与视口顶部距离，手动更新--scale - 检测支持性：
if ('scrollTimeline' in CSS) { /* 启用 scroll-timeline */ } else { /* 启用 JS 回退 */ } - JS 回退中避免频繁读取
scrollTop，改用getBoundingClientRect().top计算相对位置 - 缩放值建议用线性插值而非分段，例如：
scale = Math.max(0.7, 1 - scrollY / 200)，200 是触发区间像素数
真正难的不是写效果，而是让毛玻璃在各种 iOS 版本里稳定显示的同时，缩放动画不掉帧——这要求你放弃“一套代码跑所有端”的幻想，把 Safari 的 backdrop-filter 行为当作特例单独处理。
