Safari中CSS下划线动画闪烁，修复后文字模糊的解决方案求助

我之前做项目时也踩过Safari这个坑，一边是下划线动画触发导航栏右侧闪烁，加了-webkit-transform:translate3d(0,0,0)解决闪烁，结果又碰到文字模糊的新问题，太闹心了！给你几个亲测有效的方案，你可以按需尝试：

1. 缩小GPU加速的作用范围，只给动画元素加 #

原来你给整个header加了GPU加速，导致所有文字都被送到GPU渲染，Safari在GPU渲染文字时的亚像素处理容易出问题，才会模糊。不如把这个属性只加到有下划线动画的导航项上，其他文字还是用CPU渲染，就不会模糊了：

/* 替换原来的header样式 */
.nav-item { /* 这里.nav-item是你的导航项类名，根据实际代码调整 */
  -webkit-transform: translate3d(0,0,0);
}

2. 强制开启亚像素字体渲染 #

Safari在GPU加速模式下会默认把字体渲染改成灰度抗锯齿，你可以强制设置回亚像素抗锯齿，缓解模糊问题：

header, .nav-text { /* 目标文字元素 */
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-text-size-adjust: 100%; /* 额外加这个，避免字体大小被意外调整 */
}

3. 换一种GPU友好的下划线动画实现（最推荐） #

其实闪烁的根源是你原来的下划线动画触发了大面积重绘，不如换用transform属性实现动画——transform是GPU友好的属性，不会触发重绘闪烁，自然也就不需要加translate3d这个hack了，文字模糊的问题也就不存在了。比如用伪元素做下划线的缩放动画：

.nav-item {
  position: relative;
  text-decoration: none; /* 去掉默认下划线 */
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: -2px; /* 调整下划线位置 */
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #你的下划线颜色;
  transform: scaleX(0); /* 默认隐藏 */
  transform-origin: right center;
  transition: transform 0.3s ease; /* 动画时长和缓动效果 */
}

.nav-item:hover::after {
  transform: scaleX(1); /*  hover时展开 */
  transform-origin: left center;
}

这种方式的动画完全由GPU处理，不会导致导航栏其他部分重绘闪烁，文字也不会因为强制GPU加速而模糊，从根源上解决了问题。

4. 调整元素位置避免亚像素偏移 #

有时候文字模糊是因为元素被GPU渲染时处于亚像素位置，你可以用更轻量的translateZ(0)代替translate3d，再配合调整元素位置确保在整数像素上：

header {
  -webkit-transform: translateZ(0);
  position: relative;
  top: 0; /* 确保元素在整数像素位置 */
}

优先推荐第三种方案，因为它不需要依赖任何hack，同时解决了闪烁和模糊两个问题，兼容性也更好。

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