前言

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

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

具体 BUG

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

正常的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; 即可正常工作。

参考

要获得最佳阅读体验，请访问原文 https://baiyun.me/2022-safari-does-not-render-css-gradient-text