css - iOS 上的 Safari 在使用 background-clip 和 text-fill-color 结合一些伪元素时不显示文本

Question

我很难解开这个谜团。我创建了一个“挖空文本”效果，并使用 :after 添加了一个分隔符到 h2。除了 iOS (10.3.2) 上的 Safari 之外，它在我测试过的所有内容上看起来都很棒。

Link to fiddle带有损坏的临时修复程序。

h2.gradient {
    color: #013c65;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 2em;
    line-height: 1em;
    background: linear-gradient(1deg, #800909, #332222);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    -ms-background-clip: text;
    -ms-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
h2.gradient:after {
    content: '';
    position: relative;
    display: block;
    height: .12em;
    width: 2.5em;
    background-image: linear-gradient(1deg, #800909, #332222);
    top: .5em;
}

看起来问题似乎与组合 background-clip: text; 有关, text-fill-color: transparent; ，以及伪元素:display: block; .

我能够绝对定位并显示内联 block 伪元素。目前，我将 header 包装在 <div class="special-heading"> 中并在 div 之后添加分隔符。

是否有 iOS 不喜欢这个的原因或者是否有其他人遇到过类似的问题？我发现添加一个零宽度空间 ​神奇地让它发挥作用。

不过，我认为这可能是一个错误，因为在我的 Mac 上打开网络检查器时，我偶尔可以使用原始方法。

谢谢你的想法!

Answer 1

找到 this fix .将此添加到具有创建渐变文本属性的元素:

-webkit-box-decoration-break: clone;