iOS上的Safari浏览器在使用背景片段和文本填充颜色以及一些伪元素时不显示文字

问题描述：

我很难解决这个谜题。我创建了一个“挖空文本”效果并添加了一个分隔符，使用：在h2之后。除了iOS上的Safari（10.3.2）之外，它在我测试过的所有内容上都很棒。iOS上的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;。

我能够绝对位置并显示内联块的伪元素。目前，我在<div class="special-heading">中封装了标题，并在div后添加了分隔符。

会有一个原因，为什么iOS不喜欢这个或有任何其他人遇到过类似的问题？我发现添加一个零宽度空间神奇地使它工作。

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

感谢您的想法！

我有同样的问题和解决了这个问题对我来说也是如此。 –

是的，文本剪辑属性在许多设备上都有错误。我面对一个Android设备（虽然在许多其他Android设备上工作过），我在按钮标签上使用了相同的功能，但无法正常工作，但在div标签上运行良好。尝试将h2标签更改为div。如果它有效，那么它是一个错误。 –

答

我面临类似的问题，并在单独的线程中发现替代解决方案。

想法是将显示属性更改为内联：display: inline。不需要“HTML黑客”。

尽管此修补程序可能不适合您的布局需求，但这是从CSS视角为我工作的唯一解决方案。

Source

iOS上的Safari浏览器在使用背景片段和文本填充颜色以及一些伪元素时不显示文字

相关推荐