导航链接hover过渡时其他文本字体变细的Chromium渲染Bug求助

问题现象 #

• 鼠标悬浮顶部导航链接时，链接下划线的transition动画会触发卡片右下角粉色文本“ABC”出现短暂的字体权重降低视觉异常，持续时间与动画时长一致（0.2秒）
• 移除卡片的box-shadow样式后，该异常完全消失
• 仅在Chrome、Edge等Chromium内核浏览器中复现，Firefox无此问题

原因分析 #

这是Chromium渲染引擎的类触发型bug：当元素设置box-shadow时，浏览器会将其分配到独立的复合层；当页面中存在其他元素的过渡动画时，复合层合并重绘的过程中，字体渲染管线会出现临时竞态错误，导致文本的字重计算异常。这类bug和浏览器硬件加速渲染的并行处理逻辑相关，仅在特定布局组合下触发。

解决方案 #

方案1：提前稳定卡片的复合层 #

给卡片元素添加will-change: transform，告知浏览器提前为卡片创建独立且稳定的复合层，避免动画触发时的复合层重构冲突：

.card {
  /* 保留原有样式 */
  will-change: transform;
}

方案2：用伪元素模拟阴影替代原生box-shadow #

通过伪元素生成阴影效果，绕过原生box-shadow触发的复合层逻辑：

.card {
  position: relative;
  /* 移除原有box-shadow属性 */
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.1); /* 匹配原阴影颜色 */
  filter: blur(8px); /* 匹配原阴影模糊度 */
  z-index: -1;
}

方案3：强制关闭文本平滑渲染 #

针对异常文本，关闭Chromium的字体抗锯齿优化，避免字重计算错误：

.card .pink-text {
  -webkit-font-smoothing: none;
  font-smooth: never;
}

方案4：错开动画与重绘时机 #

给导航的过渡动画添加微小延迟，错开卡片文本的重绘时间（不推荐，会轻微影响交互流畅感）：

.nav-link {
  transition: text-decoration 0.2s 0.05s;
}

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