在文本上使用 CSS 渐变时的奇怪行为 (Safari)

【问题标题】：Strange behaviour when using CSS gradients on text (Safari)在文本上使用 CSS 渐变时的奇怪行为 (Safari)
【发布时间】：2020-05-26 05:58:42
【问题描述】：

大家好，我在 Safari（macOS Mojave 上的版本 13.0.5）上使用 css 渐变时出现了这个 strange behavior。

该段落看起来很完美on Chrome and Firefox。这是我正在使用的代码：

.highlight1 {
   background: -webkit-linear-gradient(180deg, #FFFFFF 5%, #EE8344 91%);
               -webkit-background-clip: text;
               -webkit-text-stroke: 3px rgba(255, 0, 0, 0);
   color: #232323;}

最奇怪的是，只有一个词从段落中消失了。有关如何解决此问题的任何提示？

这是直播网站：https://portfolio-84e6dc.webflow.io/

非常感谢您！

【问题讨论】：

标签： css safari paragraph webflow

【解决方案1】：

我试图检查它。 “brewer”这个词存在并且不会消失，但它不在span 的同一行上，因此样式不适用于它。当我尝试减小字体大小时，效果显示出来了。

我建议将 brewer 一词分隔在不同的跨度中，并调整 highlight1 和 NEW_CLASSNAME 中的样式以产生类似的效果。但要注意使用Safari会根据屏幕大小不同而出现效果

<p class="herotext">
    I spent some time in the 
    <span class="highlight1">world's largest </span>
    <span class="NEW_CLASSNAME">brewer</span> and the 
    <span class="highlight2">first brazilian unicorn</span> and now I design for companies 
    and startups.
</p>

【讨论】：

噢天哪……这么简单，我没想到！非常感谢 DohaHelmy。