Angular 13应用在iOS 15.5 Safari中按钮点击事件失效问题

问题现象 #

在iOS 15.5版本移动端Safari浏览器测试Angular应用时，部分按钮点击事件无法正常触发，暂未定位根因，涉及的原始代码片段如下：

<button
  (click)="ActionButtonEvent.emit()"
></button>

排查与解决思路 #

• 空按钮元素被Safari判定为非交互元素
  上述代码中按钮标签内部无任何文本、图标等内容，若未手动设置明确宽高，iOS Safari会直接将其标记为不可交互节点，不派发点击事件。修复方式为给按钮填充实际内容，或明确设置可点击尺寸，遵循iOS交互规范将最小点击区域设为44px*44px，同时补充cursor: pointer样式，强制浏览器将元素识别为可点击组件。
• 透明元素遮挡/层级异常导致事件被截获
  iOS Safari对事件冒泡的判定和Chromium内核存在差异，若按钮上层存在z-index更高的透明节点（比如遮罩层、伪元素、定位偏移的其他元素），触点命中时会直接被上层元素接收，不会传递到按钮上。排查时可通过Mac端Safari远程调试iOS设备，选中对应按钮节点查看元素覆盖关系，调整异常元素的z-index，对不需要交互的上层元素添加pointer-events: none样式，放开事件穿透。
• Zone.js事件监听未命中触发区域
  iOS 15.5部分小版本的事件派发时机和Zone.js的监听逻辑存在兼容问题，可能出现Angular模板绑定的(click)没有被正确注册到Zone监听队列的情况。可以通过模板变量获取按钮实例，在ngAfterViewInit生命周期手动绑定原生click事件做验证，若原生事件可正常触发，可升级Zone.js到最新兼容版本，或引入HammerJS补充tap触摸事件替代原生click绑定。
  手动绑定原生事件参考代码：

  // 组件类代码
  @ViewChild('actionBtn') actionBtn: ElementRef<HTMLButtonElement>;
  ngAfterViewInit(): void {
    this.actionBtn.nativeElement.addEventListener('click', () => {
      this.ActionButtonEvent.emit();
    });
  }
  

  对应模板调整：

  <button #actionBtn></button>
  

• 视口配置异常导致坐标映射错位
  若页面未正确配置viewport元标签，Safari在页面缩放、弹性滚动时可能出现交互坐标和实际DOM位置错位的问题，点击位置无法命中按钮节点。可在index.html头部补充标准viewport配置，关闭不必要的用户缩放权限做验证：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  

• 内容拦截器规则误拦截
  部分iOS Safari安装的内容拦截器（广告拦截、脚本拦截类扩展）会误判页面上的交互事件逻辑，阻断事件派发，测试时可临时关闭所有Safari扩展、内容拦截器后复现验证。

内容的提问来源于stack exchange，提问作者Majdi HSAN