Safari 和背景剪辑：文本在多行显示中无法正常工作：内联文本元素

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>