Chrome标签悬停时mat-form-field组件闪烁/临时消失的原因？

环境信息 #

• Angular版本：15、16最新版本
• Chrome浏览器版本：118.0.5993.89（官方64位版本）

问题现象 #

打开Angular应用后，悬停Chrome浏览器标签时，页面元素会临时消失。

• 悬停前：
• 悬停时：

复现情况 #

在Angular Material官网测试时，同样出现该问题：

1. 禁用Chrome硬件加速 #

Chrome硬件加速可能触发渲染异常，操作步骤：

1. 打开Chrome设置，搜索“硬件加速”
2. 取消勾选“使用硬件加速模式（如果可用）”
3. 重启Chrome后测试

2. 升级Chrome到最新版本 #

当前118版本存在已知渲染bug，升级到最新稳定版可修复部分兼容性问题：

1. 打开Chrome设置 → 关于Chrome
2. 等待自动检测并安装更新，重启浏览器

3. 排查应用CSS动画/过渡 #

部分CSS属性（如transform、opacity）在Chrome特定版本下可能引发异常：

• 临时移除应用中的动画或过渡效果，验证问题是否消失
• 若确认是某段CSS导致，可添加will-change: auto或调整动画属性规避渲染bug

4. 调整Chrome渲染参数 #

在Chrome地址栏输入chrome://flags/#enable-webgl-draft-extensions，尝试禁用该选项后重启浏览器；也可尝试调整chrome://flags/#composited-layer-bounds等渲染相关参数。

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