Safari浏览器无法显示带背景裁剪文字动画的h1标签问题求助

问题原因 #

Safari 对 background-clip: text 搭配 CSS 动画的兼容性存在两个已知限制：

1. 动画关键帧中如果没有保留完整的渐变背景声明，或者重复覆盖 background 属性，会导致 Safari 丢失渐变与文字的绑定关系，再配合你设置的 -webkit-text-fill-color: transparent，文字就会完全透明不可见。
2. background-blend-mode 搭配 background-clip: text 同时作用时，Safari 会出现渲染上下文丢失的问题，尤其是和视频背景叠加时更容易触发。

修复方案 #

按以下规则调整代码即可兼容 Safari：

• 动画关键帧中仅修改需要变化的 background-position 属性，不要重复声明整套 background 渐变规则，避免覆盖原有绑定关系
• 给 h1 元素添加 transform: translateZ(0) 触发硬件加速，规避跨层渲染 bug
• 确保 -webkit-background-clip: text 声明在所有 background 相关属性之后，避免被后续属性覆盖失效

修正后的 h1 样式 #

h1#index-title {
  font-family: 'GothamMedium', sans-serif;
  font-size: 160px;
  line-height: 0.99;
  margin-bottom: 56px;
  position: relative;
  -webkit-text-fill-color: transparent;
  background-blend-mode: difference;
  /* 渐变声明统一放在前面 */
  background: -webkit-gradient(
      linear,
      right top,
      left top,
      color-stop(50%, transparent),
      color-stop(50%, #fff)
    )
    right;
  background: -o-linear-gradient(right, transparent 50%, #fff 50%) right;
  background: linear-gradient(to left, transparent 50%, #fff 50%) right;
  background-size: 200% 100%;
  /* background-clip 放在所有background属性之后 */
  -webkit-background-clip: text;
  background-clip: text;
  /* 触发硬件加速 */
  transform: translateZ(0);
  -webkit-animation: shownow 0.8s linear forwards;
  animation: shownow 0.8s linear forwards;
  -webkit-animation-delay: calc(var(--load-time) + 0.4s);
  animation-delay: calc(var(--load-time) + 0.4s);
}

修正后的动画规则 #

@-webkit-keyframes shownow {
  100% {
    background-position: left;
  }
}
@keyframes shownow {
  100% {
    background-position: left;
  }
}

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