将背景剪辑和文本填充颜色与某些伪元素结合使用时,iOS上的Safari无法显示文本 [英] Safari on iOS not displaying text when using background-clip and text-fill-color combined with some pseudo elements
问题描述
我很难解决这个谜.我创建了一个敲除文本"效果,并在h2中使用:after添加了一个分隔符.除了iOS(10.3.2)上的Safari浏览器,它在我测试过的所有内容上看起来都很棒.
I'm having a hard time solving this mystery. I have created a "knockout text" effect and added a separator using :after to a h2. It looks great on everything I've tested it on except for Safari on iOS (10.3.2).
链接到小提琴,其中有一个临时的临时修复程序.
Link to fiddle with a broken and temporary fix.
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;
组合在一起.
Looks like the problem seems to be with combining background-clip: text;
, text-fill-color: transparent;
, and with the pseudo element: display: block;
.
我能够绝对定位并内联显示伪元素.目前,我已经将标头包装在<div class="special-heading">
中,并在div之后添加了分隔符.
I am able to absolute position and display inline-block the pseudo element. For the time being, I've wrapped the header in <div class="special-heading">
and added separator after the div.
iOS是否会不喜欢它,或者有其他人遇到过类似的问题?我发现添加一个零宽度的空格​
使其神奇地起作用.
Would there be a reason why iOS doesn't like this or has anyone else experienced similar problems? I've found that adding a zero-width space ​
magically makes it work.
但是,我认为这可能是一个错误,因为我可以偶尔在Mac上打开Web检查器的情况下使用原始方法.
I'm thinking this might be a bug, however, because I am able to get the original method working occasionally with the web inspector open on my Mac.
感谢您的想法!
推荐答案
我遇到了类似的问题,并在单独的线程中找到了替代解决方案.
I faced similar issue and found alternative solution in separate thread.
想法是将显示属性更改为内联:display: inline
.不需要"HTML hacks".
The idea is to change display property to inline: display: inline
. Doesn't require "HTML hacks".
尽管此修复程序可能无法满足您的布局需求,但从CSS角度来看,这是唯一对我有用的解决方案.
Although this fix might not fit your layout needs, that's the only solution that worked for me from CSS perspective.
这篇关于将背景剪辑和文本填充颜色与某些伪元素结合使用时,iOS上的Safari无法显示文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!