Safari and background-clip: text not working well on multiple lines of display:inline text element

Question

I don't know why, but when I set

background-clip: text

to clip a gradient/image/whatever with text (display: inline), only Safari doesn't work as it is supposed to.

I recreated a pen with this issue: https://codepen.io/steexd/details/qBZVbWY

Test it with Firefox or Chrome and then with Safari: you will notice that multi-line text won't clip correctly the background gradient.

Expected result:

Safari:

Any help would be really appreciated :)

Answer 1

You can add -webkit-box-decoration-break: clone;

It will make the text legible, however it isn't exactly what you're asking for as it will repeat the gradient on each line.

box-decoration-break property on 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>