transition 对 logo 缩放没反应，主因是 transform 起始/目标值未真实变化或选择器未匹配到更新元素；需用 scale() 替 width/height、节流 scroll、加 will-change、截断小数位、兜底 -webkit-transform 并确保 svg 属性正确。
transition 为什么对 logo 缩放没反应
常见现象是写了 transition: transform 0.3s，但滚动时 logo 大小不变——根本原因通常是 transform 的起始值和目标值没真正变化，或者 CSS 选择器没匹配到滚动中实际更新的元素。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保缩放是通过修改
transform: scale()实现，而不是改width/height（后者需额外声明transition: width 0.3s, height 0.3s） - 检查 JS 是否真的在滚动时更新了 class 或内联 style；用浏览器 DevTools 的 “Styles” 面板确认 computed
transform值是否在变 - 避免在父容器上设
overflow: hidden且未预留缩放空间，否则缩放后部分被裁切，误以为“没动”
scroll 事件里直接改 style.transform 性能很差
每帧都触发 scroll 事件，频繁写 style.transform 会强制同步布局（layout thrashing），尤其在低端设备上卡顿明显。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame节流：只在下一帧重绘前更新一次transform，不是每次 scroll 都写 - 优先用
classList.toggle()切换预设 class，把transform写死在 CSS 里，比 JS 拼字符串更稳定 - 如果必须动态计算 scale，缓存上一次滚动位置，仅当 delta > 2px 才更新，减少无效计算
scale 缩放导致子元素模糊或锯齿
Chrome 和 Safari 对非整数 scale 值渲染时容易出现抗锯齿异常，特别是含文字或细边框的 logo，缩放后边缘发虚。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 加
will-change: transform提前告知浏览器该元素将动画，触发 GPU 加速（但别滥用，每个元素都加反而拖慢） - 避免 scale 值带过多小数位，用
Math.round(scale * 100) / 100截断到两位小数 - 对 SVG logo，确保
viewBox设置合理，且无px单位硬编码尺寸；位图 logo 尽量提供 2x 分辨率并用image-rendering: -webkit-optimize-contrast微调
移动端 touchmove 滚动不触发 transition
iOS Safari 和部分安卓 WebView 中，scroll 事件默认不冒泡、不连续触发，甚至被系统级滚动优化抑制，导致 logo 缩放卡住或延迟。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
touchmove时加{ passive: false }，并在回调里调用event.preventDefault()（仅当必要时，否则影响原生滚动流畅性） - 改用 Intersection Observer +
getBoundingClientRect()监测 logo 相对于视口的位置，绕过 scroll 事件依赖 - 测试真机，别只信桌面 Chrome 的 device toolbar 模拟；iOS 上
transform: scale(0.9)可能被降级为 bitmap 缩放，加-webkit-transform: scale(0.9)兜底
滚动中做缩放，最麻烦的从来不是怎么写 transition，而是怎么让浏览器“相信”这个变化值得立刻渲染——中间差的那几毫秒，往往卡在 repaint 触发时机、GPU 图层拆分、或者你忘了给 SVG 加 preserveAspectRatio="xMidYMid meet"。
