Блог

Я не знаю почему, но когда я устанавливаю

background-clip: text

чтобы обрезать градиент / изображение / что угодно с текстом (дисплей: встроенный), только Safari не работает так, как предполагается.

Я воссоздал перо с этой проблемой:https://codepen.io/steexd/details/qBZVbWY

Протестируйте его в Firefox или Chrome, а затем в Safari: вы заметите, что многострочный текст неправильно обрезает градиент фона.

Ожидаемый результат:

Safari:

Любая помощь была бы очень признательна 🙂

Вы можете добавить -webkit-box-decoration-break: clone;

Это сделает текст разборчивым, однако это не совсем то, что вы просите, поскольку он будет повторять градиент в каждой строке.

свойство box-decoration-break в MDN

 h1 {
  max-width:120px;
}
span {
  background-image: -webkit-linear-gradient(right, red, pink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; 
}  

 <div>
   <h1>Hi, i'm a text with a <span>long span gradient</span>.</h1>
</div>