html - Safari 和背景剪辑 : text not working well on multiple lines of display:inline text element

Question

我不知道为什么，但是当我设置background-clip: text要剪辑渐变/图像/任何带有文本的内容(显示:内联)，只有 Safari 无法正常工作。
我用这个问题重新制作了一支笔:https://codepen.io/steexd/details/qBZVbWY
使用 Firefox 或 Chrome 然后使用 Safari 对其进行测试:您会注意到多行文本不会正确剪切背景渐变。
预期结果:

苹果浏览器:

任何帮助将非常感激 :)

Answer 1

您可以添加 -webkit-box-decoration-break: clone;它会使文本清晰易读，但这并不是您所要求的，因为它会在每一行上重复渐变。
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>