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>