Issue

This Content is from Stack Overflow. Question asked by Evangelos Bitsilis

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

PS.: THIS HAPPENS ONLY ON FIREFOX.

const test = document.getElementById("test");
test.style.backgroundImage = `linear-gradient(45deg, rgb(227, 36, 36) 0%, rgb(0, 0, 0) 57%, rgb(0, 255, 0) 71%, rgb(255, 0, 255) 85%, rgb(255, 0, 64) 100%)`;

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

<div id="test"></div>

Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.