Mobile Safari -webkit-background-clip: text; and / or CSS gradients of text in mobile safari

Question

I get nasty artifacts in mobile safari on both the iPhone 4S and Gen-2 iPad when I try to use CSS -webkit styles to get gradient text.

This is the appropriate CSS applied to the text element:

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; 

It looks great in Chrome and Safari and exits Firefox gracefully. It looks bad on mobile Safari. You can see a live example at http://www.synchronautapp.com

In mobile safari, there are 1px borders around stylized elements. These boundaries come and go depending on how scalable the user is. Example here: http://synchronautapp.com/mkramer/IMG_0088.PNG

Googling did not have many of these issues. What causes this problem, and is there a way around the gradient text? Is there a clean CSS fallback plan for mobile webkit?

Answer 1

Try:

 image-rendering: -webkit-optimize-contrast;