Javascriptが視覚的にWebkit Gradientでテキストを更新しない

Question

私はいくつかのテキスト 'foo'を持っています。このテキストを 'bar'に更新したいと思いますが、これを行うと、強調表示されるまでテキストは変わりません。サンプルコードのjsfiddleはhereです。それを更新する方法を見つけ出すことはできますか？ 注：現在のグラデーションのコードは、Chromeで動作します

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

Javascriptを：私はこのトリックを使用しました

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