изменение содержимого HTML элемента с градиентным текстом не визуализируется в Chrome

Question

У меня есть элемент div с текстом внутри.Текст градиентный.Когда я пытаюсь изменить содержимое элемента, он не отображается повторно в браузере.Если я смотрю dom с элементом inspect, я вижу, что значение меняется, , но на странице оно остается таким же .Отлично работает на 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>

Answer 1

Вы можете нарисовать повторное отображение элемента.Обратите внимание, что предполагается, что ваш 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';  
}