Weird behaviour of CSS-Tesseract (Cube) - html

Question

I successfully created a cube in a cube, a Tesseract. But for some reason I really can't explain, the cube is moving downwards while the Animation is going on.
If you watch the scrolling bar of your browser, the entire cube is moving downwards.
And yes, of course you can "ignore" this problem by changing the margin of the parent-div-element but that doesn't solve it.
#-webkit-keyframes cube-spin {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
#keyframes cube-spin {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
#-webkit-keyframes counter-rot {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
#keyframes counter-rot {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
.cube-wrap {
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 0%;
perspective-origin: 50% 0%;
}
.outer {
width: 300px !important;
}
.cube {
position: relative;
width: 200px;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: cube-spin 8s infinite linear;
animation: cube-spin 8s infinite linear;
}
.backendtext {
position: absolute;
width: 200px;
font-size: 35px;
text-align: center;
font-family: sans-serif;
text-transform: uppercase;
-webkit-animation: counter-rot 8s infinite linear;
animation: counter-rot 8s infinite linear;
}
.outer div {
width: 300px;
height: 300px;
background: rgba(255, 116, 0, 0.1);
line-height: 530px;
}
.inner div {
width: 200px;
height: 200px;
background: rgba(153, 69, 0, 0.7);
}
.cube div {
position: absolute;
box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
font-size: 35px;
text-align: center;
font-family: sans-serif;
text-transform: uppercase;
}
.depth div.front-pane {
-webkit-transform: translateY(-100px) translateZ(100px);
transform: translateY(-100px) translateZ(100px);
}
.outer.depth div.front-pane {
-webkit-transform: translateY(-150px) translateZ(150px);
transform: translateY(-150px) translateZ(150px);
}
.depth div.back-pane {
-webkit-transform: translateY(-100px) translateZ(-100px) rotateY(180deg);
transform: translateY(-100px) translateZ(-100px) rotateY(180deg);
}
.outer.depth div.back-pane {
-webkit-transform: translateY(-150px) translateZ(-150px) rotateY(180deg);
transform: translateY(-150px) translateZ(-150px) rotateY(180deg);
}
.depth div.left-pane {
-webkit-transform: translateY(-100px) translateX(100px) rotateY(-270deg);
transform: translateY(-100px) translateX(100px) rotateY(-270deg);
}
.outer.depth div.left-pane {
-webkit-transform: translateY(-150px) translateX(150px) rotateY(-270deg);
transform: translateY(-150px) translateX(150px) rotateY(-270deg);
}
.depth div.right-pane {
-webkit-transform: translateY(-100px) translateX(-100px) rotateY(270deg);
transform: translateY(-100px) translateX(-100px) rotateY(270deg);
}
.outer.depth div.right-pane {
-webkit-transform: translateY(-150px) translateX(-150px) rotateY(270deg);
transform: translateY(-150px) translateX(-150px) rotateY(270deg);
}
.depth div.top-pane {
-webkit-transform: translateY(-200px) rotateX(-90deg);
transform: translateY(-200px) rotateX(-90deg);
}
.outer.depth div.top-pane {
-webkit-transform: translateY(-300px) rotateX(-90deg);
transform: translateY(-300px) rotateX(-90deg);
}
.depth div.bottom-pane {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
<div style="height: 300px; margin-top: 400px;">
<div class="cube-wrap">
<div class="cube depth inner">
<a class="backendtext">Backend</a>
<div class="front-pane"></div>
<div class="back-pane"></div>
<div class="top-pane"></div>
<div class="bottom-pane"></div>
<div class="left-pane"></div>
<div class="right-pane"></div>
</div>
<div class="cube depth outer">
<div class="front-pane">Frontend</div>
<div class="back-pane">Frontend</div>
<div class="top-pane"></div>
<div class="bottom-pane"></div>
<div class="left-pane">Frontend</div>
<div class="right-pane">Frontend</div>
</div>
</div>
//EDIT: Works fine on Chrome and Edge. Will try to add prefixes to everything and see if it solves the problem.
//EDIT2: Added Prefixes, still doesn't work on Firefox but does properly on Chrome, Edge etc.
//EDIT3: Set Overflow of the cube-wrapper to hidden but I would still love to know the reason.