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

Question

大家好，当我使用 css 渐变时，我在 Safari（macOS Mojave 上的版本 13.0.5）上有这个 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/

在此先感谢您！

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>

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

Strange behaviour when using CSS gradients on text (Safari)

css

safari

paragraph

webflow