Android의 CSS3 텍스트 그라데이션이 작동하지 않습니다.

Question

텍스트 그라디언트를 사용하려고하는데 Chrome & Safari에서 작동하지만 Android에서는 텍스트가 아닌 콘텐츠에 그라디언트가 적용됩니다 (그라디언트로 텍스트를 보는 대신 그래디언트가있는 상자를 보게됩니다. 특히 텍스트가 중요하기 때문에 이상하지는 않습니다.

@mixin text-gradient($from : #2bd2f2, $to : #218bb2) { 
    text-shadow: none; 
    background: -webkit-gradient(linear, left top, left bottom, from($from), to($to)); 
    -webkit-background-clip: text; 
    -moz-background-clip: text; 
    background-clip: text; 
    -webkit-text-fill-color: transparent; 
    color: transparent; 
} 

어떤 생각에 관한 문제가 해결되지 않는 이유 :

여기 내 SASS 믹스 인입니까?

감사합니다.

Answer 1

이 방법이 유용 할 것입니다. 스크립트에이를 구현하고 원하는 경우 모든 변수를 변경하십시오. 다른 모든 것이 실패하면 mixin 외부에서 사용할 수 있습니다.

이 스크립트는 Android 크롬에서 테스트되었으며 작동합니다.

h1 { 
     text-shadow: none; 
     background: #2bd2f2; /* Failsafe color */ 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2bd2f2), color-stop(99%, #218bb2)); 
     background: -webkit-linear-gradient(top, #2bd2f2 0%, #218bb2 99%); 
     background: linear-gradient(to bottom, #2bd2f2 0%, #218bb2 99%); 
     -webkit-background-clip: text; 
     -webkit-text-fill-color: transparent; 
} 

이 방법은 많은 브라우저와 호환되지 않습니다. 그래서 내가 그라디언트로 텍스트를 그리기 위해 html5에서 canvas 옵션을 추천 할 수 있습니다. 이 링크는 도움이 될 것입니다. 당신이 -moz- 같은 모든 브라우저 공급 업체 접두사에 대해 언급해야처럼

https://www.inkling.com/read/html5-canvas-fulton-fulton-1st/chapter-3/text-and-the-canvas-context

https://www.inkling.com/read/html5-canvas-fulton-fulton-1st/chapter-3/text-with-gradients-and-patterns