텍스트 그라디언트를 만들 때 모바일 장치에서 이상한 그라데이션 블리드

Question

필자는 css3 텍스트 그라디언트를 작성하고 있습니다. 브라우저에서 완벽하게 작동하지만 웹에서 볼 때 유용합니다. 텍스트 주위에 항상 선이나 상자가 있습니다. 이 페이지에서 일어나는 것과 유사합니다 : http://www.paulund.co.uk/playground/demo/css_text_gradient/

이것은 웹킷 버그입니까?

Answer 1

css3에서 svg bg를 사용하는 Michael의 조언 덕분에 모바일 문제가 해결되었습니다.

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

그리고 다음 grad.svg : 여기

는 CSS 코드입니다

이 상자의 선이 나타납니다 때문에 버그와는 다른 줌에 갈 때 다시 보인다

<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>