css - 移动版 Safari -webkit-background-clip : text; and/or CSS-based text gradients in mobile safari

Question

当我尝试使用 -webkit css 样式获取渐变文本时，我的 iPhone 4S 和 gen-2 iPad 上的移动版 Safari 中出现了令人讨厌的伪影。

这是应用于文本元素的相关 CSS:

background-image: -webkit-linear-gradient(#eee 0%, #4a80e5 100%);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#4a80e5));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

它在 Chrome 和 Safari 中看起来不错，在 Firefox 中正常失败。它在移动 Safari 中看起来很糟糕。您可以在 http://www.synchronautapp.com 查看一个实例

在移动版 safari 上，样式元素周围有 1px 的边框。这些边界根据用户放大的程度来来去去。此处示例:http://synchronautapp.com/mkramer/IMG_0088.PNG

谷歌搜索并没有产生很多类似的问题。是什么原因导致此问题，是否有保留渐变文本的解决方法？是否有针对移动 webkit 的纯 CSS 回退计划？

Answer 1

尝试:

image-rendering: -webkit-optimize-contrast;