微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

在尝试使用-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看到一个实时示例

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

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

解决方法

尝试:

image-rendering: -webkit-optimize-contrast;

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。