Mobile Safari -webkit-background-clip：text;和/或移动野生动物园中基于CSS的文本渐变

Question

当我尝试使用-webkit css样式来获取渐变文本时，我在iPhone 4S和gen-2 iPad上的手机游戏中遇到了令人讨厌的文物。

这是应用于文本元素的相关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

查看实时示例

在移动游猎中，样式元素周围有1个xx边框。这些边界来来去去取决于用户放大的方式。示例：http://synchronautapp.com/mkramer/IMG_0088.PNG

谷歌搜索没有产生许多类似的问题。是什么导致了这个问题，是否有一种解决方法可以保持渐变文本？是否有针对移动webkit的纯CSS回退计划？

Answer 1

尝试：

image-rendering: -webkit-optimize-contrast;