文本在与之交互之前不可见

时间:2017-07-19 12:45:51

标签: ios css

我遇到iOS和文字背景问题。

我有以下文字:

<h1>Lorem ipsum</h1>

应用此CSS以使文本填充渐变:

-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(45deg, #db6b2a, #ae1a31);
-webkit-background-clip: text;

但是,我在iOS上遇到了一个奇怪的问题,文本完全不可见,直到用户实际点击它应该在哪里,然后它似乎加载。我尝试添加颜色后备功能没有成功,唯一可行的方法是删除我正在使用的谷歌字体,这导致它正常加载。

以下是实时问题的链接:https://swillis.co.uk/test

从电脑上可以看出,&#34;测试&#34;标题加载很好,但在iOS上它们不会出现。

由于

2 个答案:

答案 0 :(得分:1)

我最终设法解决了这个问题。这个问题似乎是各种各样的事情,首先是;我从我的文本中删除了伪clearfix(不知道为什么这有用但我仍然有问题,如果这仍然存在),其次是删除display: table;并将标题设置回内联块。然后我必须提出一个解决方法来阻止我的标题旁边的内容包装,所以我创建了一个简单的包含块元素。

答案 1 :(得分:0)

-webkit-text-fill-color似乎无法在Safari移动设备上运行

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color#Browser_compatibility