Angular应用如何阻止Chrome下非可编辑元素出现闪烁输入光标

问题原因 #

这是Chrome浏览器的特有渲染bug，多在Angular应用频繁触发变更检测导致DOM重绘、元素可编辑属性配置异常、或开启浏览器光标浏览模式时出现，非可编辑元素会意外渲染闪烁的输入插入符。

解决方案 #

按生效优先级排序：

• 全局样式快速修复：在项目全局样式文件中添加如下CSS规则，直接把非可编辑元素的插入符设为透明，不影响正常输入框的使用：

*:not(input):not(textarea):not([contenteditable="true"]) {
  caret-color: transparent;
}

如果仅部分元素有问题，也可以只给对应元素加caret-color: transparent的样式即可。

• 修正contenteditable绑定逻辑：Angular中如果给元素绑定了[contenteditable]属性，要确保绑定值的初始值明确为false，不要留空或设为undefined，Chrome会把空值的contenteditable属性判定为生效状态，意外开启可编辑特性。

<!-- 错误写法 -->
<div [contenteditable]="isEdit">...</div>

<!-- 正确写法 -->
<div [contenteditable]="isEdit ?? false">...</div>

• 优化变更检测频率：如果问题元素所在的组件有高频数据更新（比如定时器、实时消息推送触发频繁重绘），可以把组件的变更检测策略改为OnPush，减少不必要的DOM更新，从根源降低bug触发概率：

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {}

• 用户端排查：如果仅个别用户出现该问题，可告知用户按F7关闭Chrome自带的光标浏览模式即可。

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