iOS click延迟是Safari为双击缩放预留的300ms判断窗口，并非bug；闪烁由-webkit-tap-highlight-color默认样式引起，可用rgba(0,0,0,0)消除但无法解决延迟。
iOS 上的 click 延迟不是 bug，是 Safari 为双击缩放预留的 300ms 判断窗口；闪烁则是 -webkit-tap-highlight-color 默认样式在 touchend 和 click 之间“闪”出来的。只改 CSS 能压掉闪烁，但压不掉延迟——这点必须先说清。
用 -webkit-tap-highlight-color: rgba(0,0,0,0) 消除点击闪烁
这是最直接、零成本的视觉修复，针对的是用户松开手指后那一瞬间的灰色半透明高亮框。
- 必须写在触发 click 的元素上，或用通配符
*{-webkit-tap-highlight-color: rgba(0,0,0,0);}全局覆盖（但注意：会影响所有可点击区域，包括原生<a>） - 如果父容器（比如
<div class="list-item">）也响应点击，它同样要加该样式，否则父级仍会闪 - 该声明只在 WebKit 内核生效（Safari、WKWebView、uni-app H5），Chrome for iOS 底层也是 WKWebView，所以也管用
- 它不解决延迟，只是让 300ms 等待期间“看起来不卡”——用户松手即见反馈（前提是你的 JS 已经绑了
@touchend或用了 FastClick）
用 touch-action: manipulation 缩短延迟（部分有效）
这个属性告诉浏览器：“这个元素只做点击/轻击，别等双击，也别做滚动或缩放”，从而让某些场景下跳过 300ms 判定。
- 对纯按钮、链接类元素有效，写法：
button, a { touch-action: manipulation; } - iOS 14+ 支持较好；iOS 12–13 下效果不稳定，有些机型仍会保留约 100–200ms 延迟
- 不能和
overflow: scroll/scroll-behavior: smooth同时用在同一个元素上，否则会被降级为auto，失去效果 - 慎用于滚动容器内部的子项（如列表项）：若父容器本身有
touch-action: pan-y，子项设manipulation可能被忽略
为什么只靠 CSS 无法彻底解决 click 延迟
根本原因在于：iOS Safari 的 300ms 是事件调度层的行为，CSS 不参与事件流控制。
立即学习“前端免费学习笔记（深入）”；
-
touch-action是提示，不是指令；浏览器仍可能因兼容性策略兜底走旧路径 -
-webkit-tap-highlight-color只管样式渲染，不管事件触发时机 - 真正消灭延迟，得靠 JS 干预：要么用
@touchend+ 手动防误触逻辑（推荐），要么引入FastClick并确保它被正确 transpile 和 attach（uni-app/HBuilderX 项目里这步最容易漏） - 还有一个硬性前提常被忽略：iOS 要求可点击区域物理尺寸 ≥44×44pt（非 CSS 像素），
padding不够、font-size过小、或被transform: scale(0.8)压缩后实际尺寸不足，都会导致 touch 事件根本收不到
真正在意响应速度的交互（比如游戏按钮、实时开关、列表项滑动切换），别押注 CSS 单点优化。延迟藏在事件流底层，闪烁只是表皮——把 @touchend 逻辑写稳，再补上尺寸和层级检查，比调十个 CSS 属性都管用。
