将背景剪辑和文本填充颜色与某些伪元素结合使用时，iOS上的Safari无法显示文本

Question

我很难解决这个谜。我创建了一个“敲除文本”效果，并使用：after将分隔符添加到了h2中。除了iOS（10.3.2）上的Safari之外，它在我测试过的所有内容上看起来都很棒。

链接到一个无用的临时修复小提琴。

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;。

我能够绝对定位并内联显示伪元素。目前，我已经将标头包裹<div class="special-heading">在div之后并添加了分隔符。

iOS会不会有这样的原因，或者其他人也遇到过类似的问题吗？我发现添加零宽度的空间​使它神奇地工作了。

但是，我认为这可能是一个错误，因为我可以偶尔在Mac上打开Web检查器的情况下使用原始方法。

感谢您的想法！

Answer 1

找到了这个修复程序。将此添加到具有创建渐变文本的属性的元素：

-webkit-box-decoration-break: clone;

Answer 2

我遇到了类似的问题，并在单独的线程中找到了替代解决方案。

这样做是为了显示属性更改为在线：display: inline。不需要“ HTML hacks”。

尽管此修复程序可能无法满足您的布局需求，但从CSS角度来看，这是唯一对我有用的解决方案。

资源