2022 年了 Safari 无法渲染渐变文字的 BUG 依旧存在

前言

Safari 在渲染 CSS 渐变文字时如果恰好这个元素是一个 flex 容器，那么将会遇到文字变透明无法显示的 bug。绕过方法是不要在 flex 容器元素上应用渐变文字相关的属性。

经过研究，我发现这个问竟然在 6 年前就存在了。但是到了 6 年后的今天，最新的 iOS 15.4.1 和 macOS 12.3.1 版本依旧存在这个问题，Safari 依旧在浪费 Web 开发者的时间和精力去绕过这本不应该存在的问题。这让我想起了那句话："Safari 是新时代的 IE"

具体 BUG

我想用 CSS 实现类似下图中的文字渐变效果

代码是这样的

<h1 className="heading"><Icon /> 这是一段渐变文本</h1>

.heading {
  display: flex;
  align-items: center;
  background-image: linear-gradient(90deg, blue, red);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

以上代码实际渲染出来的文字是透明看不见的。作为开发者我们绕过这个问题的办法是不要在 flex 容器元素上应用渐变文字相关的属性。上述代码去掉 disflex: flex; 即可正常工作。

参考

• Safari doesn't render css gradient text

本文原载于：baiyun.me

原文链接：https://baiyun.me/2022-safari-does-not-render-css-gradient-text