How to fix the flickering / shaky gradient on Firefox?

Question

If you check the code snippet below you'll notice a flickering/shaky effect on the black, green and purple while i'm changing only the red. Why is this happening and how to fix it?

PS.: THIS HAPPENS ONLY ON FIREFOX.

--- Edit ---

Windows 11, firefox 104.0.2. In case anyone is wondering

const test = document.getElementById("test");
test.style.backgroundImage = gradient(0);

function gradient( percent ) {
  return `linear-gradient(45deg, rgb(227, 36, 36) ${ percent }%, rgb(0, 0, 0) 57%, rgb(0, 255, 0) 71%, rgb(255, 0, 255) 85%, rgb(255, 0, 64) 100%)`;
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

setInterval(async function() {
  for (let i = 0; i < 13; i = i + 2) {
    await sleep( i + 100 );
    test.style.backgroundImage = gradient( i );
  }
}, 1000)

#test {
  height: 250px;
}

How to fix the flickering / shaky gradient on Firefox?

0 Answers