Question

我遇到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上它们不会出现。

由于

Answer 1

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

Answer 2

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

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

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

2 个答案: