全局重置 -webkit-tap-highlight-color 大概率失败，因 * 选择器触发 WebKit 内核合成层绘制异常；必须用语义化选择器（如 a, button, [onclick], [tabindex="0"]）显式命中可点击元素，并仅使用 transparent 或 rgba(0,0,0,0) 值，同时补全 :active 触控反馈。
全局重置 -webkit-tap-highlight-color 为什么大概率失败
直接写 * { -webkit-tap-highlight-color: transparent; } 在 iOS Safari 和微信 X5 WebView 中会引发白屏或渲染卡顿，不是 CSS 写错了，而是 WebKit 内核对通配符选择器的处理存在底层限制。这个属性不继承、不传播，只对“被浏览器识别为可点击”的元素自身生效——* 匹配了 html、body、div 等大量非交互节点，内核在合成层绘制时异常，真机上一碰就挂。
哪些元素必须显式命中才能生效
必须用具体、语义明确的选择器，覆盖所有可能触发 tap 行为的节点：
-
a、button、input[type="button"]、input[type="submit"] -
[role="button"]、[tabindex="0"]（含自定义按钮容器） -
[onclick]、[ontouchstart]（仅当 JS 绑定真实存在时） -
textarea、select（表单控件也参与 tap 反馈）
别漏掉动态渲染场景：Vue 的 v-if、React 的 useState 更新后插入的新 button，如果没被上述选择器覆盖，高亮照常出现。
-webkit-tap-highlight-color 的合法取值和常见陷阱
只认两个值，其他全无效：
立即学习“前端免费学习笔记（深入）”；
- ✅
transparent—— 最稳，iOS 10+ 和微信 X5 全支持 - ✅
rgba(0, 0, 0, 0)—— 旧版 UC 浏览器可能需要它 - ❌
none、unset、initial、rgba(255,255,255,0)—— WebKit 直接忽略
注意：outline: none 或 :active 样式完全不影响它——那是另一套渲染逻辑，生命周期都不重叠。
关掉高亮后，用户点下去没反应怎么办
系统高亮本质是触控反馈。关掉后必须手动补，否则用户无法确认是否点中：
- 给所有可点击元素加
:active样式，比如a:active { opacity: 0.8; }或button:active { transform: scale(0.98); } - 用
role="button"+tabindex="0"的 div，必须同时加:active和键盘焦点样式（如outline: 2px solid #007bff） - 禁用
-webkit-user-select: none要谨慎——它可能压制长按复制，只在必要时配合使用
最易被忽略的一点：桌面 Chrome 的设备模拟器默认不触发 tap 高亮，开发时根本看不到问题。不拿真机测 iOS Safari 和 Android Chrome，等于没做。
