Whispers

移动端点击高亮蓝框修复

前端

问题

Android Chrome / iOS Safari / 微信内置浏览器中，点击任意可交互元素（链接、按钮、卡片等）时出现蓝色或黑色高亮矩形框，影响视觉体验。

根因

WebKit 内核浏览器默认对可点击元素添加 -webkit-tap-highlight-color 高亮指示。该属性默认值因平台而异（Android 蓝色、iOS 灰色/黑色）。

修复

css 
*,*::before,*::after {  -webkit-tap-highlight-color: transparent;}

对所有元素（含伪元素）统一设为 transparent，一次性覆盖整个站点，无需逐个组件处理。

不需要 -webkit-user-modify hack——那个非标准属性仅用于微信 iOS 端特定场景，且会破坏文本选择行为。