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