Как исправить быстрое воспроизведение анимации в Google Chrome?

Question

[aquapendente]

Всем привет! Столкнулся с проблемой: анимация переливающегося фона на js очень быстро воспроизводится в хроме. Пробовал зайти на сайт с других браузеров, анимация работает корректно.

gradient-line.php

spoiler

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<style><?php include "gradient-line.css"?></style>

<div id="gradient"><p>1982₽/10000₽</p></div>

<script src="elements/gradient-line.js"></script>

gradient-line.css

spoiler

#gradient{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 78vw;
    height: 35px;
    padding: 0px;
    margin: 0px;
    border-radius: 25px;
    margin-left: 1.3%;
}
#gradient p{
    color: white;
    font-size: 20px;
}

gradient-line.js

spoiler

var colors = new Array(
    [62,35,255],
    [60,255,60],
    [255,35,98],
    [45,175,230],
    [255,0,255],
    [255,128,0]);
  
var step = 0;
var colorIndices = [0,1,2,3];

var gradientSpeed = 0.002;

function updateGradient()
{

if ( $===undefined ) return;

var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];

var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";

var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";

$('#gradient').css({
    background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});

step += gradientSpeed;
if ( step >= 1 )
{
    step %= 1;
    colorIndices[0] = colorIndices[1];
    colorIndices[2] = colorIndices[3];
    
    colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    
}
}

setInterval(updateGradient,10);

Несколько дней назад эта анимация работала в хроме как надо, но сейчас сломалась. В чем дело?

Comments

[aquapendente]

Не могу понять в чем дело... Сейчас она заработала корректно, хотя до этого работало неправильно

[aquapendente]

Думаю вопрос решен. Хром кешировал файл страницы в то время как я менял настройки анимации, он получил как раз таки быструю анимацию и уже после не реагировал на остальные действия в коде