-webkit-text-fill-color：透明；在 Safari 7.1.7 中不起作用

Question

我有一个带有几个 li 的 ul。

我在 ul 上使用这个 id。

#list {
margin-right: auto;
margin-left: auto;
width:500px;
color:black;
background: -webkit-linear-gradient(#000, #909090);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

ul 的内容在 Chrome 中接受渐变处理就好了，但在 Safari 中则不然。在 Safari 中，所有的 li 都是“隐形的”。如果我检查然后禁用“-webkit-text-fill-color：transparent;”，文本将变得可见，尽管没有渐变（显然）。

想法？

这是 JSfiddle：https ://jsfiddle.net/s96bzcua/

亲切的问候，

Answer 1

我有同样的问题。原来这是由于显示属性。无论出于何种原因，Safari 都需要将显示设置为“inline”或“inline-block”，而不是“inline-flex”。

所以对我来说这意味着改变 From: display: flex; 至：显示：内联；

Answer 2

您可以使用具有渐变背景的叠加层，禁用与叠加层的交互并将其放置在列表的底部。

看看这个小提琴： https://jsfiddle.net/s96bzcua/1/

#overlay {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 99%, rgba(255, 255, 255, 1) 100%);
    width: 100%;
    pointer-events: none;
    height: 50%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 99;
}

使用

pointer-events: none;

禁用与覆盖层的所有交互，并将所有内容包装在具有相对定位的 div 中，以便您可以将覆盖层放置在列表的底部。