必须将 backdrop-filter 与 transform 动画分离：外层遮罩（fixed 定位、设 backdrop-filter 和半透背景）保持静止，内层卡片（绝对定位、仅应用 scale 动画）负责缩放；safari 需双写 -webkit-backdrop-filter 并避免遮罩层使用 transform/opacity，同时用 animation 而非 transition 确保模糊同步。
backdrop-filter + transform 动画必须分层写，不能套在同一个元素上
直接给模态框容器同时加 backdrop-filter: blur(8px) 和 transform: scale(0)，动画过程中模糊会断掉或只在终态生效——因为 transform 会触发新 stacking context，切断 backdrop 渲染链。真正能动起来的结构是：外层固定遮罩（负责模糊）、内层卡片（负责缩放）。
- 遮罩层用
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，设backdrop-filter: blur(8px)和半透背景background-color: rgba(0,0,0,0.4) - 卡片层绝对定位在遮罩内，初始
transform: scale(0.7) translateZ(0)（translateZ(0)强制 GPU 加速但不创建隔离上下文） - 动画只作用于卡片层，遮罩层保持静止——模糊始终“看到” body 内容
缩放动画要用 animation 而不是 transition，否则 backdrop 模糊不同步
transition 依赖状态切换（比如 hover 或 class 切换），但模态框打开时往往伴随 DOM 插入或 visibility 变化，容易导致 backdrop-filter 还没渲染完成、缩放就已开始。用 @keyframes 显式控制时间轴更稳。
- 定义动画：
@keyframes modalScaleIn { 0% { transform: scale(0.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } - 卡片层加
animation: modalScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;—— 这个缓动函数能模拟“弹出感”，比 linear 更自然 - 别漏
forwards，否则动画结束瞬间会闪回初始状态
Safari 上模糊+缩放一起动，必须双写 -webkit-backdrop-filter
iOS 16.4+ 和 macOS Ventura 才稳定支持 backdrop-filter 动画，旧版 Safari 会卡顿、文字发虚，甚至整个模糊区域消失。这不是代码问题，是 WebKit 合成策略限制。
- 遮罩层样式必须写成：
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); - 避免在遮罩层上加
transform或opacity—— 这些属性在 Safari 中会直接禁用 backdrop 渲染 - 测试时打开 Safari 开发者菜单 → 实验性功能 → 确保 “backdrop-filter” 已启用（部分 Beta 版需手动开）
body 滚动锁住后 backdrop 模糊失效？改用 wrapper overflow:hidden
很多人习惯用 document.body.style.overflow = 'hidden' 锁滚动，但这会让 Safari 的 backdrop-filter 失效——它需要 body 保持可滚动，才能把“背后内容”正确投射到模糊层。
- 正确做法：把遮罩层（含 backdrop-filter）和卡片都挂到
下，然后给遮罩层加overflow: hidden，而不是 body - 遮罩层高度设为
100vh，不是100%—— 防止 Safari 计算错误导致模糊区域错位 - 如果页面本身有横向滚动，遮罩层还要加
overflow-x: hidden，否则模糊边缘可能被截断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
