根本原因是浏览器对完全透明且无内容的元素默认降级为不可交互；iOS/Android因渲染优化跳过hit-testing，需用border:1px solid rgba(0,0,0,0.01)等方法强制参与事件分发。

HTML 中用 rgba(0,0,0,0) 或 transparent 设置透明背景的元素，在移动端常出现「点不动」「响应延迟」「穿透点击」——根本原因不是颜色本身，而是浏览器对完全透明且无内容的元素默认降级为不可交互（pointer-events: none 的隐式行为或渲染优化）。

为什么 transparent 和 rgba(0,0,0,0) 在 iOS/Android 上触摸失效

现代移动端浏览器（尤其是 Safari 和 Chrome for Android）会对满足以下条件的元素主动忽略指针事件：

• 背景完全透明（background-color: transparent 或 rgba(0,0,0,0)）
• 无文字、无子节点、无边框、无阴影（即“视觉上不存在”）
• CSS 中未显式声明 pointer-events: auto

这不是 bug，是渲染引擎为节省合成层资源做的主动优化。iOS WebKit 尤其激进，哪怕加了 height/width，只要没「可绘制内容」，就可能跳过 hit-testing。

让透明层可触摸的 3 种可靠写法

核心原则：给浏览器一个「必须参与事件分发」的理由。推荐按优先级使用：

• 加一像素半透边框：border: 1px solid rgba(0,0,0,0.01) —— 最轻量，兼容所有 iOS/Android 版本，不影响视觉
• 强制启用指针事件：pointer-events: auto（注意：父元素不能是 pointer-events: none）
• 添加不可见但可绘制的内容：::after { content: ""; display: block; width: 100%; height: 100%; } + position: absolute，再配合 pointer-events: auto

避免用 opacity: 0 替代透明背景——它仍会触发完整绘制和事件捕获，但会导致父层透出，常引发意外点击穿透。

.touchable-transparent {
  background-color: transparent;
  border: 1px solid rgba(0,0,0,0.01);
  pointer-events: auto;
  width: 100%;
  height: 100%;
}

调试时如何快速验证是否命中透明层问题

在 Safari 开发者工具（iOS 连接 Mac）或 Chrome DevTools 的「Rendering」面板中开启：

• Paint flashing（看该区域是否被跳过绘制）
• Layer borders（检查是否生成了独立合成层）
• 在元素上右键 → 「Break on > attribute modification」，监听 pointer-events 是否被 JS 动态覆盖

真机测试务必打开「辅助功能 > 粗体文本」或「减少透明度」——部分系统设置会强制重置透明元素的事件行为。

真正棘手的不是怎么写透明色，而是浏览器悄悄把「看不见」等同于「不值得响应」。加个 0.01 的 alpha 边框，比查三天事件冒泡链更管用。