RequestAnimationFrame + Css3 Animation will caused Recalculate Style

I found that when running Css3 Animation and RequestAnimationFrame (without changing DOM) at the same time, Recalculate Style will be fired every time, It means GPU acceleration not working right? Is it a bug?

When only run with css3 animation, the GPU acceleration is working fine, everything is perfect.

Performance - Css3 rotateZ only

Starting requestAnimationFrame, will see Recalculate Style was fired everytime.

Performance - Css3 rotateZ + requestAnimationFrame

Stop Css3 Animation (only requestAnimationFrame)，the Recalculate gone~

enter image description here

Main code as followed:

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(359deg);
  }
}

.ring {
  display: none;
  width: 80px;
  height: 80px;
  margin: 24px auto;
  border: 2px solid transparent;
  border-top-color: red;
  border-radius: 50%;
  display: block;
}

const toggleCss = document.querySelector("#toggleCss");
toggleCss.addEventListener("click", function () {
  document.body.classList.toggle("loading");
  if (document.body.classList.contains("loading")) {
    toggleCss.innerText = "Stop Css3 Animation";
  } else {
    toggleCss.innerText = "Start Css3 Animation";
  }
});

let running = false;

function tick() {
  if (running) {
    requestAnimationFrame(tick);
  }
}

tick();

const toggleRaf = document.querySelector("#toggleRaf");
toggleRaf.addEventListener("click", function () {
  if (running) {
    running = false;
    toggleRaf.innerText = "Start requestAnimationFrame";
  } else {
    toggleRaf.innerText = "Stop requestAnimationFrame";
    running = true;
    tick();
  }
});

View the online example here: https://yfkyv.csb.app/

Codesandbox: https://codesandbox.io/s/relaxed-andras-yfkyv?file=/src/index.js

Recommended topics

Hot tags