Странно изтичане на градиент на мобилно устройство при създаване на градиенти на текст - css3, webkit

Аз създавам css3 текстови градиенти. Те работят перфектно в браузърите, но когато ги виждате в интернет. винаги има линия или кутия около текста. Подобно на това, което се случва на тази страница: http://www.paulund.co.uk/playground/demo/css_text_gradient/

Това ли е бъг в webkit?

Отговори:

Благодарение на съвета на Майкъл, използвайки svg bg върху генерирания css3, той поправя мобилния проблем.

Ето кода за CSS:

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

И тогава 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>