Question

Ive been creating css3 text gradients. They work perfectly find in browsers, but when you view them on the web. there is always a line or a box around the text. Similar to what happens on this page: http://www.paulund.co.uk/playground/demo/css_text_gradient/

Is this a webkit bug?

Answer 1

Thanks to Michael’s advice using an svg bg over a css3 generated one fixes the mobile issue.

Here is the code for the css:

background:url(../img/grad.svg) 0 -116px;
background-size: 100% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

And then the grad.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="60">
  <linearGradient id="normal" x1="0%" y1="0%" x2="0%" y2="100%">
     <stop offset="0%" stop-color="#ffffff"/>
     <stop offset="100%" stop-color="#000000"/>
  </linearGradient>
  <rect x="0" y="0" width="100%" height="60" fill="url(#normal)" />
</svg>