iOS Safari 中 button:active 不触发需同时设置 touch-action: manipulation 和 tabindex="0"，并用 transform 与 inset box-shadow 实现可感知按压效果，transition 必须定义在常态规则中。
button:active 在 iOS Safari 上不触发？先加 touch-action 和 tabindex
移动端最常遇到的问题不是样式写错，而是浏览器压根没把元素当可点击目标处理。iOS Safari 默认跳过 div 或 span 的 :active，哪怕绑了 onclick 也没用。
必须显式声明交互意图：
- 首选语义化
<button></button>—— 它自带tabindex="0"、可聚焦、默认响应:active - 若必须用
div，得同时加role="button"和tabindex="0" - 在按钮选择器里加
touch-action: manipulation，禁用 300ms 延迟判断，否则:active被卡住或延迟生效 - 顺手加上
cursor: pointer（桌面端 fallback）和-webkit-tap-highlight-color: transparent，避免点击时闪一层灰色高亮膜，盖掉你的按压效果
只改 background-color 是无效反馈
人在强光屏、小尺寸设备或深色背景上，根本看不出 background-color 变深 10%。真正可感知的“被按下”，依赖形变与光影梯度变化。
有效组合是：
立即学习“前端免费学习笔记（深入）”；
-
transform: scale(0.96)或transform: translateY(1px)—— 缩放比位移更稳，iOS 上translateY有时触发重排闪烁 -
box-shadow: inset 0 1px 2px rgba(0,0,0,0.15)—— 注意inset关键字不能漏，模拟受压内阴影 - 常态下补一句
box-shadow: 0 2px 6px rgba(0,0,0,0.15)，营造“凸起”感，形成对比 - 深色模式需单独覆盖：
@media (prefers-color-scheme: dark) { .btn:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.4); } }
transition 写在 :active 里完全没用
:active 是状态，不是动画钩子。过渡必须定义在常态规则中，且所有要过渡的属性都得有明确初始值，否则浏览器无法插值。
正确写法示例：
button {
transform: scale(1);
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
transition: transform 0.08s ease, box-shadow 0.08s ease;
}
button:active {
transform: scale(0.96);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}
注意几点：
- 别用
transition: all—— 颜色变化触发 repaint，低端安卓机明显卡顿 - 时间控制在
0.06s–0.1s：PC 可用0.06s，移动端建议 ≥0.08s，太短像没响应，太长反馈迟钝 - 避免动
width/height/border-width—— 触发 layout thrashing，直接掉帧
父容器 overflow: hidden 会裁掉按压效果
按压时用了 transform: scale() 或 box-shadow: inset，如果按钮父容器设了 overflow: hidden，缩放后的边缘或内阴影可能被直接裁掉，导致效果断层或消失。
同样，pointer-events: none 会彻底屏蔽 :active 匹配，连带 :hover 和 :focus 也失效 —— 这和 disabled 属性效果一致，但更隐蔽。
真机调试时最容易忽略这点：模拟器里看着正常，一上 iPhone 就发现按压“没到底”，其实是阴影被裁了，或者整个伪类压根没匹配上。
