Странное поведение при использовании CSS градиентов над текстом (Safari)

Question

Привет, ребята. У меня такое странное поведение в Safari (версия 13.0.5 для MacOS Mojave) при использовании css градиентов.

Абзац выглядит идеально в Chrome и 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

Я пытался это проверить. Слово «пивовар» существует и не исчезает, но оно не совпадает с 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>