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

April 23, 2022

前言

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

参考

本文原载于:baiyun.me

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

如果你喜欢我的内容,请考虑请我喝杯啤酒🍺吧,非常感谢🥰 。

If you like my contents, please support me via BuyMeCoffee, Thanks a lot.