Javascript 使用渐变文本更改元素的HTML内容不会在chrome中重新呈现

我有一个div元素，里面有一些文本。文本是渐变的。当我尝试更改元素的内容时，它不会在浏览器中重新渲染。如果我用inspect元素观察dom，我可以看到值正在变化。 它在firefox上运行良好

<style>
    .grad_font {
        background: -webkit-linear-gradient( #e3004a, #ffb201);
        background-image: -webkit-linear-gradient( #e3004a, #dc3d27);
        -webkit-background-clip: text;
        font-size: 44px;
        -webkit-text-fill-color: transparent;
    }

</style>
<div>
    <div id="grad_price" class="tariff_cena grad_font">
        <div class="tariff_cena_number">25.188</div>
    </div>

    <button onclick="changeTariff()">click</button>
</div>
<script>
    function changeTariff() {
        document.querySelector('.tariff_cena_number').innerHTML = Math.random();
    }
</script>

.grad_字体{
背景：-webkit线性梯度（#e3004a，#ffb201）；
背景图像：-webkit线性渐变（#e3004a，#dc3d27）；
-webkit背景剪辑：文本；
字体大小：44px；
-webkit文本填充颜色：透明；
}
25.188
点击
功能更改关税（）{
document.querySelector（'.tarrize\u cena\u number'）。innerHTML=Math.random（）；
}

您可以重新绘制并显示元素。注意：这假设您的

div

是块类型元素。如果没有，只需更改显示类型以适应

function changeTariff() {
    document.querySelector('.tariff_cena_number').innerHTML = Math.random();
    var e = document.querySelector('#grad_price');
    e.style.display = 'none';
    e.style.display = 'block';  
}

---

从@suspectas的答案展开，如果你引用了远视，它会起作用

例如：

---

除非必要，否则不应使用前缀（

-webkit

），线性渐变（linear gradient）是受良好支持的。另外，只能使用

背景

或

背景图像

。关于主要问题：看起来像一个bug，会在Chromium问题跟踪器上报告它（然后，您使用的是非标准功能，如果它们没有标准化，甚至可能会被删除…。是的，在多次尝试修复后前缀仍然存在：），但在这种情况下，它不会改变任何东西。不这样或那样工作。这可能是删除非标准功能的结果，因为它工作了几个月，在chrome更新后突然停止。它不适用于此解决方案。我也试过类似的方法。在更改值之前删除渐变字体，更改值，然后再次添加渐变字体类。那么问题就不同了。它会重新渲染，但不会删除旧视图。它只是一个接一个地呈现：）有趣，ok会删除这个。

e.style.display = 'none';
e.offsetHeight;
e.style.display = 'block';