按钮按下缩放无效需检查:active触发条件、添加transition实现动画、移动端适配touch-action和viewport、用will-change优化渲染。
按钮按下时缩放没反应？检查是否触发了 :active 伪类
很多情况下写好了 :active { transform: scale(0.95); } 却没效果，根本原因是移动端或部分浏览器中 :active 默认只在「有焦点且被触摸/点击」时生效，而普通鼠标悬停不会激活它——它不是 hover，是“正在被按下的瞬间”。
确保你是在真实点击（或触摸）时观察效果，而不是仅靠鼠标移入；若在桌面端调试，可临时加 :hover 对比验证是否样式本身写对了。
为什么加 transition 才能看到缩放动画
transform 本身只是状态切换，没有过渡就只有突变（闪一下），用户感知不到“按下反馈”。必须配合 transition 才能平滑缩放。
常见错误是只写了 transition: transform 0.1s; 却漏掉 timing function 或未指定可过渡属性：
- 推荐写法：
transition: transform 0.15s ease-out;（ease-out模拟按压回弹感） - 避免只写
transition: all 0.15s;——会意外过渡其他属性（如 color、opacity），影响性能和预期 - 移动端要注意：iOS Safari 对
:active的持续时间极短（约 100ms），所以transition时长不宜超过0.15s，否则动画会被截断
移动端点击无响应？需要 touch-action 或 viewport 配合
某些安卓 WebView 或 iOS 页面里，:active 在按钮上完全不触发，大概率是因为父容器设置了 touch-action: none，或者页面缺少 viewport 声明导致事件未正确分发。
快速排查和修复：
- 给按钮加
touch-action: manipulation;（明确告诉浏览器这是可点击元素） - 确认页面有
<meta name="viewport" content="width=device-width, initial-scale=1"> - 如果按钮是
<div>而非<button>，务必加role="button"和tabindex="0"，否则部分屏幕阅读器或系统不识别其可交互性
缩放后文字模糊？用 will-change 提前提示渲染优化
频繁缩放可能引发重绘抖动或字体发虚，尤其在低分辨率屏或旧版 Chrome 中。这不是 bug，而是浏览器未对 transform 做图层提升所致。
简单加一行就能缓解：
立即学习“前端免费学习笔记（深入）”；
button {
will-change: transform;
}
但注意：will-change 不要滥用——只加在真正需要缩放反馈的按钮上，且不要配合 transform: scale(1) 初始值一起写（会提前创建图层却无必要）。更稳妥的做法是只在 :active 里声明：
button:active {
transform: scale(0.96);
will-change: transform;
}
实际项目中，缩放值别小于 0.9，否则视觉上像“塌陷”而非反馈；也别用 scale(1.05) 这类放大，容易让按钮溢出布局或遮挡相邻元素。
