자바 스크립트가 웹킷 그라디언트로 시각적으로 업데이트되지 않음

Question

그라디언트를 사용하여 색상을 지정하는 'foo'텍스트가 있습니다. 이 텍스트를 'bar'로 업데이트하고 싶습니다.하지만 이렇게하면 텍스트가 강조 표시 될 때까지 텍스트가 그대로 유지됩니다. 예제 코드가있는 jsfiddle은 here입니다. 누구나 업데이트 방법을 알아낼 수 있습니까? 참고 : 현재 그라데이션 코드는 크롬에서 작동

HTML :

<div id="gradient_div"> 
    <p id="gradient_text" onload="update"> 
    Foo 
    </p> 
</div> 

CSS :

#gradient_div 
{ 
    background: linear-gradient(#000000,#ffffff); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
} 

자바 스크립트 : 나는이 트릭을 사용했습니다

setTimeout(function(){ 
document.getElementById("gradient_text").innerHTML="bar"; 
},500); 

Answer 1

@BrianDiesel이 말한 것과 비슷한 재 페인트를 강요해야합니다. 이 작업을해야합니다 :

setTimeout(function(){ 
 
    var elem = document.getElementById("gradient_text"); 
 
    elem.innerHTML = "bar"; 
 
    // force repaint 
 
    var display = elem.style.display; 
 
    elem.style.display = 'none'; 
 
    setTimeout(function(){ 
 
    elem.style.display = display; 
 
    }, 50); 
 
}, 500);

#gradient_div { 
 
    background: linear-gradient(#000000,#ffffff); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
}

<div id="gradient_div"> 
 
    <p id="gradient_text" onload="update"> 
 
    Foo 
 
    </p> 
 
</div>

기본적으로

이 모든 해킹하고 귀하의 사용 사례에 따라 작동하지 않을 수 있습니다,하지만 당신이 지원하려는 브라우저에서 작동 하나를 찾을 수 있어야한다 . 이게 아니라면 알려줘.

도움이 되었기를 바랍니다.

Answer 2

과거 브라우저가 요소를 다시 그리도록 강제하려면 :

setTimeout(function(){ 
    var elm = document.getElementById("gradient_text"); 
    elm.innerHTML="bar"; 
    elm.style.display = 'none'; 
    elm.style.display = 'block'; 
},500);