Strange behaviour when using CSS gradients on text (Safari)

Hi guys I'm having this strange behavior on Safari (version 13.0.5 on macOS Mojave) when using css gradients.

The paragraph looks perfect on Chrome and Firefox. This is the code I'm using:

.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;}

The strangest thing is that just one word is disappearing from the paragraph. Any tips on how to solve this?

This is the live website: https://portfolio-84e6dc.webflow.io/

Thank you so much in advance!

Solution

I tried to inspect it. The word "brewer" exist and doesn't disappear but it isn't on the same line of span so styles don't apply to it. when I tried decreasing font size the effect showed.

I suggest separating the word brewer in a different span and adjust styles in highlight1 and a NEW_CLASSNAME to have a similar effect. But pay attention to the effect will happen according to screen different sizes using 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>