Safari 不呈现 css 渐变文本

Question

我正在尝试使用以下 CSS 代码在 webkit 浏览器中制作渐变文本：

.text {
background: -webkit-linear-gradient(blue, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}

它在 Chrome 中完美运行，但在 Safari（8 和 9）中它不会呈现渐变文本，除非您通过鼠标单击+拖动来选择它。

HTML如下：

<p class = "text">Hello world.</p>

花了2个晚上。发现了很多使用这种方法的建议，但有几个问题与我的类似，根本没有解决方案。如果有人愿意帮忙，将不胜感激。

重要更新：

我发现，这段代码在应用于单个<p>元素时效果很好，但是当应用于 div 包装器到单个或多个<p>元素时，无法在 Safari 中呈现（而不是在 chrome 中），如下所示：

<div class = "text">    
   <p>First line.</p>
   <p>Second, way longeeeeeeer line. </p>
   <p>Third line, just to see gradient span over multiple lines. </p>
</div>

任何想法为什么会出现这种情况或如何克服这种情况？

Answer 1

我找到了一个简单的解决方法

.text, span {
 display: block;
}

Answer 2

我知道这是一个老问题，但以防万一有人仍然需要它：我遇到了同样的问题，对我有用的是向其添加文本阴影并使阴影透明。

.text {
background: -webkit-linear-gradient(blue, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px #00000000; <--
}

请注意，我在十六进制代码的末尾添加了“00”，如果有人不知道，这会导致透明！

Answer 3

我也遇到了同样的问题，看起来是 Safari 的错误。我注意到只有当级联元素是块类型时才会出现此问题。

我的黑客行为是这样的

    <div class = "text">    
        <span>First line.</span>
        <p></p>
        <span>Second, way longeeeeeeer line. </span>
        <p></p>
        <span>Third line, just to see gradient span over multiple lines.</span>
        <p></p>
    </div>

我拥有段落标签的唯一原因是为了间距，因为在跨度上添加显示块将再次触发错误。