CSS渐变文本在Web/安卓正常显示 Safari浏览器中不可见问题求助

Safari 对设置了 display: flex/display: grid 的容器节点直接应用 background-clip: text 存在原生兼容性缺陷：渐变背景无法正确裁剪到容器内的直接文本节点上，搭配 -webkit-text-fill-color: transparent 就会导致文本完全透明不可见，这就是你代码失效的核心原因。

提供两种可落地的修复方式，任选其一即可：

方案1：给文本嵌套独立的内联标签（推荐，无副作用） #

把渐变效果类从flex容器上移除，套在文本外层的span标签上，让渐变效果应用在flex的子元素而非容器本身：

修正后HTML代码 #

<h2 class="mine-box-title">
  <span class="gradient-effect">25 MILLION</span>
</h2>

原有CSS代码无需修改即可生效。

方案2：移除容器的flex布局 #

你当前的flex仅用来做单行文本的垂直对齐，完全可以通过调整行高、内边距实现，去掉.mine-box-title的display: flex、align-items: center相关属性即可。

建议调整CSS属性书写顺序，把浏览器前缀版本的属性放在标准无前缀属性之前，兼容性更稳妥：

.gradient-effect {
  background: linear-gradient(240.86deg, #ff8329 0%, #ff007a 66.41%);
  -webkit-text-fill-color: transparent;
  width: max-content;
  -webkit-background-clip: text;
  background-clip: text;
}

内容的提问来源于stack exchange，提问作者Tarique Akhtar Ansari