css 渐变文字在 Safari 上不可见

Question

我在 web 和 android 设备上的渐变 css 上面临一个问题，但在 Z50DE9BC68C93DC32D8C7C909 上完全不显示其文本。 请看两个屏幕截图。

我已经检查了 caniuse.com，并且-webkit-text-fill-color和background-clip: text 。

 .gradient-effect { background: linear-gradient(240.86deg, #ff8329 0%, #ff007a 66.41%); -webkit-text-fill-color: transparent; width: max-content; background-clip: text; -webkit-background-clip: text; }.mine-box-title { font-family: Poppins; font-style: normal; font-weight: bold; font-size: 40px; line-height: 44px; display: flex; align-items: center; letter-spacing: -0.01em; }

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

Answer 1

自 2017 年以来，WebKit Bugzilla 上有一个未解决的未解决问题： background-clip:text 不适用于 display:flex 。 苹果已经忽略了这个漏洞 4 年，它可能永远不会得到解决。

删除display: flex并且它可以工作：

 .gradient-effect { background: linear-gradient(240.86deg, #ff8329 0%, #ff007a 66.41%); -webkit-text-fill-color: transparent; width: max-content; background-clip: text; -webkit-background-clip: text; }.mine-box-title { font-family: Poppins; font-style: normal; font-weight: bold; font-size: 40px; line-height: 44px; letter-spacing: -0.01em; }

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