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

Question

嗨，我在使用css渐变时在Safari上具有此strange behavior（在macOS Mojave上为13.0.5版）。

该段看起来很完美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/

非常感谢您！

Answer 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>