Angular应用Safari浏览器Popover内输入框无法聚焦输入问题

这是Safari浏览器与Angular动态渲染元素交互时的常见兼容性问题，我帮你整理了几个针对性的解决方案，按优先级尝试：

1. 修复pointer-events属性（最常见原因） #

Safari对动态生成的元素（比如*ngIf控制的Popover内容）容易出现pointer-events被意外设置为none的情况，导致输入框无法接收交互。

修改步骤： #

给Popover的容器div添加自定义class，然后设置CSS：

<!-- 给容器添加class -->
<div class="popover-content" *ngIf="placeMarkService.currentPopOverfeature != undefined"> 
  <input class="form-control margin-bottom-5 no-margin" style="font-size: 10px; height: 24px;" #placeName [ngModel]="placeMarkService.currentPopOverfeature.get('name')"> 
</div> 
<div class="popover-content" *ngIf="placeMarkService.currentPopOverfeature != undefined"> 
  <textarea class="form-control"></textarea>
</div>

/* 强制开启交互能力 */
.popover-content {
  pointer-events: auto !important;
  position: relative;
  z-index: 9999 !important; /* 同时避免层级遮挡问题 */
}

2. 手动触发Angular变更检测 #

Safari下动态渲染元素时，Angular的变更检测可能没有及时同步，导致输入框的绑定状态异常。

修改步骤： #

在组件中注入ChangeDetectorRef，并在Popover显示后手动触发检测：

import { Component, ChangeDetectorRef } from '@angular/core';
import { PlaceMarkService } from './your-service-path';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html'
})
export class YourComponent {
  constructor(
    private placeMarkService: PlaceMarkService,
    private cdr: ChangeDetectorRef
  ) {}

  // 假设这是你显示Popover的方法
  showPopover(feature: any) {
    this.placeMarkService.currentPopOverfeature = feature;
    this.cdr.detectChanges(); // 手动触发变更检测，确保视图同步
  }
}

3. 替换*ngIf为[hidden]（兼容性替代） #

*ngIf会完全移除/重建DOM元素，在Safari下偶尔会引发渲染异常。改用[hidden]只是隐藏元素，保留DOM节点：

<div [hidden]="placeMarkService.currentPopOverfeature === undefined" class="popover-content"> 
  <input class="form-control margin-bottom-5 no-margin" style="font-size: 10px; height: 24px;" #placeName [ngModel]="placeMarkService.currentPopOverfeature.get('name')"> 
</div> 
<div [hidden]="placeMarkService.currentPopOverfeature === undefined" class="popover-content"> 
  <textarea class="form-control"></textarea>
</div>

同时确保[hidden]的样式生效：

[hidden] {
  display: none !important;
}

4. 修复用户选择限制 #

如果Popover的父元素设置了user-select: none，Safari会继承这个属性导致输入框无法选中内容，需要单独覆盖：

.popover-content input,
.popover-content textarea {
  -webkit-user-select: auto !important; /* Safari专属前缀 */
  user-select: auto !important;
}

内容的提问来源于stack exchange，提问作者Stephen Gadd