应使用 -webkit-tap-highlight-color: transparent 作用于可点击元素（如 button、[role="button"]），配合 user-select: none 消除 iOS 15.4+ 微闪，并手动添加 :active 视觉反馈，因该高亮是 WebKit 独立图层，不受 outline 或 :focus 影响。
怎么关掉 iOS 点击时的蓝色/灰色高亮
直接写 -webkit-tap-highlight-color: transparent，但必须加在可点击元素上，不能靠继承或全局重置。这个样式只对 WebKit 内核生效（iOS Safari、微信 X5），Android Chrome 62+ 已彻底忽略它。
常见错误包括：
- 给
div加了onclick却没加role="button"或tabindex="0"，结果样式不触发 - 用
* { -webkit-tap-highlight-color: transparent }，某些旧版微信 X5 会白屏 - 值写成
none、unset或rgba(0,0,0,0)—— 只有transparent被识别 - 搭配
:active试图覆盖，但两者生命周期不同：:active在手指按下未松开时极短生效，而高亮在touchstart就渲染，且覆盖所有背景和阴影
推荐选择器（精准命中，不伤表单）：
code>a, button, input[type="button"], input[type="submit"], [role="button"], [tabindex="0"] {
-webkit-tap-highlight-color: transparent;
}iOS 15.4+ 上可能残留微弱灰白闪烁，这不是样式失效，而是文本可选行为干扰，需同步加 user-select: none；但如果里面含电话号码、地址等需复制内容，得用包裹方式单独放开 user-select: auto。
立即学习“前端免费学习笔记（深入）”；
为什么 outline: none 和 :active 都不能替代
因为点击高亮是 WebKit 渲染层独立绘制的 overlay 图层，和 CSS 伪类、焦点轮廓完全无关。它不走 :focus 流程，也不响应 outline 属性。
典型现象：
-
a:active { background: red; }在 iOS Safari 上几乎不可见——延迟约 300ms，且滑动松手就中断 -
input:focus { outline: none; }只影响键盘 Tab 焦点，对触控点击零作用 - 写了
active:bg-blue-500的 Tailwind 类，蓝框照常出现
Tailwind 默认不提供对应工具类，因为它不是样式状态，而是浏览器内核行为。真机测试才看得见问题，桌面模拟器默认不触发 tap 高亮。
如何禁用 iOS 滚动回弹（非全局锁死）
纯 CSS 无法真正禁用回弹，overflow: hidden 会直接锁死滚动，不现实。必须配合 JS 控制边界行为。
关键逻辑是：当滚动到顶部且用户向上滑、或到底部且向下滑时，调用 event.preventDefault()。
正确做法：
- 目标元素（如
.scroll-container）需显式设overflow-y: auto和-webkit-overflow-scrolling: touch - 监听该元素的
touchstart和touchmove，记录起始 Y 并判断边界条件 -
touchmove的事件监听器必须带{ passive: false }，否则preventDefault无效 - 避免监听
document或body的touchmove，否则整个页面无法滚动
示例片段：
code>const el = document.querySelector('.scroll-container');
let startY = 0;
<p>el.addEventListener('touchstart', e => {
startY = e.touches[0].clientY;
});</p><p>el.addEventListener('touchmove', e => {
const currentY = e.touches[0].clientY;
const isAtTop = el.scrollTop === 0 && currentY > startY;
const isAtBottom = el.scrollHeight - el.scrollTop <= el.clientHeight && currentY < startY;</p><p>if (isAtTop || isAtBottom) {
e.preventDefault();
}
}, { passive: false });关掉高亮后，用户点不动怎么办
高亮本质是触控反馈。关掉后若不补视觉响应，用户会误判是否点中，尤其在快速点击或滑动场景下。
必须手动加 :active 样式，但要注意：
- iOS 上
:active触发延迟高、持续时间短，建议用transform: scale(0.98)或opacity: 0.8这类轻量变化 - 不要只依赖背景色变化，滑动离开时容易中断
- 动态插入的元素（如 React
useState切换、Vuev-if）需确保 class 或 role 同步，否则高亮会重新出现 - 如果用了
FastClick或touch-action: manipulation，高亮可能“消失”，但这只是事件流被拦截，掩盖真实问题
最易被忽略的是：禁用高亮和禁用回弹是两套机制，不能互相替代；一个管点击瞬间反馈，一个管滚动边界行为。混用时务必分开验证，尤其在 iOS 17+ 和微信 X5 等 WebView 中表现差异极大。
