Как исправить анимационный глюк в mozilla firefox и edge?

Question

Когда вы нажимаете на грань куба , он превращает это грань в пользователя и анимация останавливается. Когда вы нажимаете снова, он плавно возвращается в исходное состояние. В Opera и Google Chrome все отлично работает. Но в Mozilla и Edge наблюдается скачок анимации, как на рисунке ниже. В чем проблема, как исправить?

Вот код для codpen и пример правильной работы. https://codepen.io/RJDio/pen/rNVmaOo

Firefox

Edge

let open = false;
let changing = false;

document.addEventListener("DOMContentLoaded", function() {



  let cube = document.querySelector('#D3Cube');
  let side1 = document.querySelector('#side1');

  side1.addEventListener('click', function() {

    if (changing) {
      return;
    }

    if (!open && !changing) {

      open = true;
      changing = true;

      this.classList.add('open')
      var compTransform = getComputedStyle(cube).getPropertyValue("transform");
      cube.style.transform = compTransform;
      cube.style.animation = 'none';
      cube.classList.add("animateTop");
      setTimeout(function() {
        cube.style.removeProperty('transform');
      }, 50);
      setTimeout(function() {
        changing = false;
      }, 1640);

    } else if (open && !changing) {

      open = false;
      changing = true;

      setTimeout(function() {
        cube.classList.remove("animateTop");
        changing = false;
      }, 4999);
      cube.style.removeProperty('animation');
    }
  });
});

#wrapD3Cube {
    width: 500px;
    height: 500px;
    margin: 200px auto;
}
#D3Cube {
    width: 300px;
    height: 300px;
    top: 50px;
    transform-style: preserve-3d;
    margin: auto;
    position: relative;
    transform-style: preserve-3d;
    transition: 1.64s;
}
.closeLink {
  color: #f7f7f7;
  background-color: #333;
  font-size: 20px;
}
.animatCube{
  animation: cube 5s linear infinite;
  transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
}
.animateTop{
  transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) scale3d(1.5, 1, 1.5);
}

@keyframes cube {
  100%  {  transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);	}
}
#D3Cube > div {
  position: absolute;
  transition: all 0.5s linear;
  width: 300px;
  height: 300px;
  float: left;
  overflow: hidden;
  opacity: 0.85;
}
#side1 {
  transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(150px);
  background-color: purple;
  backface-visibility:hidden;
}
#side2 {
  transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(150px);
  background-color: #ffaf1c;
  backface-visibility:hidden;
}
#side3 {
  transform: translateX(0px) translateY(0px) translateZ(150px);
  background-color: #58d568;
  backface-visibility:hidden;
}
#side4 {
  transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(150px);
  background-color: #ed3030;
  backface-visibility:hidden;
}
#side5 {
  transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(150px);
  background-color: #1c5ffe;
  backface-visibility:hidden;
}
#side6 {
  transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(150px);
  background-color: #f2f215;
  backface-visibility:hidden;
}

<div id="wrapD3Cube">
	<div id="D3Cube" class="animatCube">
		<div class="slide" id="side1"><a class="closeLink" href="">X</a></div>
		<div class="slide" id="side2">2</div>
		<div class="slide" id="side3">3</div>
		<div class="slide" id="side4">4</div>
		<div class="slide" id="side5">5</div>
		<div class="slide" id="side6">6</div>
	</div>
</div>