ios safari中button:active不触发是因默认禁用非语义化元素点击，需用标签或为添加role="button"和tabindex="0"，并设置touch-action: manipulation、避免父级touch-action: none，配合transform/box-shadow动画及正确transition声明才能实现可靠点击反馈。
button:active在iOS Safari里根本没触发？
不是你写错了，是iOS Safari默认把非语义化元素当“不可点击”处理。哪怕加了onclick，:active照样不生效。必须让浏览器明确知道“这是个按钮”：
- 优先用
<button></button>标签，别用<div class="btn"> <li>如果非用<code><div>，得同时加<code>role="button"和tabindex="0" - 在按钮或其父容器上加
touch-action: manipulation，否则300ms延迟会卡住:active激活时机 - 删掉父级的
touch-action: none——轮播图、弹窗遮罩层常偷偷加这个，直接封死所有:active - 必加
transform: translateY(2px)（向下移，不是向上）或transform: scale(0.96)（缩放更稳，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); } } - 正确写法：
button { transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,0.15); transition: transform 0.08s ease, box-shadow 0.08s ease; }+button:active { transform: translateY(2px); box-shadow: inset 0 1px 2px rgba(0,0,0,0.15); } - 别用
transition: all——颜色变化触发repaint，低端安卓机明显卡顿 - 时间卡在
0.08s–0.1s最稳妥：PC可用0.06s，移动端低于0.08s像没响应，高于0.1s开始有延迟感 - 禁用
width/height/border-width动画——触发layout thrashing，直接掉帧 -
pointer-events: none在父容器上——常见于遮罩层、Modal backdrop，直接吃掉所有事件 -
overflow: hidden裁掉transform后的阴影或边缘，看着像没动 -
-webkit-tap-highlight-color: transparent没加，iOS先闪一层灰色高亮膜，把你的:active效果盖住了 -
:active选择器权重不够，被:hover或全局重置样式覆盖（检查DevTools里是否被划掉） - 安卓WebView旧版本可能只在松开手指后才触发
:active，属于浏览器行为，不是代码错；加cursor: pointer能提前激活部分机型
为什么点了没“按下去”的感觉？
只改background-color或color几乎无效。人眼对颜色变化迟钝，尤其在强光屏或深色背景上。真正可感知的反馈靠形变和光影：
transition写在哪才有效？
:active里写transition完全无效。过渡必须定义在常态选择器中，且所有要动的属性都得有初始值：
真机调试时最常踩的坑
模拟器看不出问题，一上真机就失效。核心干扰项就这几个：
transform参数，最后发现只是父容器多了一句touch-action: none。
