Seltsames Farbverlaufs-Bluten auf Mobilgeräten beim Erstellen von Textverläufen - css3, webkit

Ich habe css3 Textverläufe erstellt. Sie funktionieren perfekt in Browsern, aber wenn Sie sie im Web anzeigen. Es gibt immer eine Linie oder ein Kästchen um den Text. Ähnlich wie auf dieser Seite: http://www.paulund.co.uk/playground/demo/css_text_gradient/

Ist das ein Webkit-Fehler?

Antworten:

Dank Michaels Rat, der eine svg bg über eine css3 generiert, wird das mobile Problem behoben.

Hier ist der Code für die CSS:

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

Und dann die 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>