Animated 3D cube only works in Firefox

Question

I've created a 3D animated cube which rotates infinitely in two different angles. The cube is located on the home page of our company's new test website (next to the title Software when you scroll down). In Firefox it works fine, but in Google Chrome and Opera the cube is not displayed. There, if I inspect the element and tick one of the attributes in the styles menu the cube will appear with gaps between the faces. In Microsoft Edge the cube is displayed but doesn't rotate. I haven't checked Safari because I'm using Windows.

Also, the images on the cube faces are only displayed correctly in Firefox, whereas in the other browsers the images are zoomed in and you only see a fraction of the seismic layers in the image.

I've tried to recreate the problem in JSFiddle , using Google Chrome. Setting the class col to 100vh won't do for me because it will leave a large empty space on our home page.

How can I make this 3D rotating cube work in all browsers? Any help would be much appreciated, thanks in advance!

 * { margin: 0; } html, body { height: 100%; } body { perspective: 25em; } .row { display: flex; } .row::after { display: block; content: ''; clear: both; } .col { position: relative; flex: 1; } [class*='cube'] { position: absolute; } .cube { top: 50%; left: 50%; font-size: 8vmin; transform-style: preserve-3d; animation: cube 8s linear infinite; } .cube-face { margin: -2em; width: 4em; height: 4em; backface-visibility: hidden; } .cube-face:nth-child(1) { transform: translateZ(2em); background: url(http://test.dgbes.com/images/cube-face-1.jpg) center/contain no-repeat fixed; } .cube-face:nth-child(2) { transform: rotateY(90deg) translateZ(2em); background: url(http://test.dgbes.com/images/cube-face-2.jpg) center/contain no-repeat fixed; } .cube-face:nth-child(3) { transform: rotateY(180deg) translateZ(2em); background: url(http://test.dgbes.com/images/cube-face-3.jpg) center/contain no-repeat fixed; } .cube-face:nth-child(4) { transform: rotateY(270deg) translateZ(2em); background: url(http://test.dgbes.com/images/cube-face-4.jpg) center/contain no-repeat fixed; } .cube-face:nth-child(5) { transform: rotateX(90deg) translateZ(2em); background: url(http://test.dgbes.com/images/cube-face-5.jpg) center/contain no-repeat fixed; } .cube-face:nth-child(6) { transform: rotateX(-90deg) translateZ(2em); background: url(http://test.dgbes.com/images/cube-face-6.jpg) center/contain no-repeat fixed; } @keyframes cube { to { transform: rotate3d(1, 1, 1, 1turn) rotate3d(1, -1, 1, 1turn); } } 

 <div class="row"> <div class="col"> <div class="cube"> <div class="cube-face"></div> <div class="cube-face"></div> <div class="cube-face"></div> <div class="cube-face"></div> <div class="cube-face"></div> <div class="cube-face"></div> </div> </div> </div> 

Answer 1

Apparently I fixed the problem for Google Chrome and Opera by removing the fixed position in the cube faces. The problem still isn't solved in Microsoft Edge.

 * { margin: 0; } body { height: 100vh; } [class*=cube] { position: absolute; } .cube { top: 50%; left: 50%; font-size: 8vmin; transform-style: preserve-3d; animation: cube 8s linear infinite; } .cube-face { margin: -2em; width: 4em; height: 4em; backface-visibility: hidden; } .cube-face:nth-child(1) { transform: translateZ(2em); background: url(http://test.dgbes.com/images/cube-face-1.jpg) center/contain no-repeat; } .cube-face:nth-child(2) { transform: rotateY(90deg) translateZ(2em); background: url(http://test.dgbes.com/images/cube-face-2.jpg) center/contain no-repeat; } .cube-face:nth-child(3) { transform: rotateY(180deg) translateZ(2em); background: url(http://test.dgbes.com/images/cube-face-3.jpg) center/contain no-repeat; } .cube-face:nth-child(4) { transform: rotateY(270deg) translateZ(2em); background: url(http://test.dgbes.com/images/cube-face-4.jpg) center/contain no-repeat; } .cube-face:nth-child(5) { transform: rotateX(90deg) translateZ(2em); background: url(http://test.dgbes.com/images/cube-face-5.jpg) center/contain no-repeat; } .cube-face:nth-child(6) { transform: rotateX(-90deg) translateZ(2em); background: url(http://test.dgbes.com/images/cube-face-6.jpg) center/contain no-repeat; } @keyframes cube { to { transform: rotate3d(1, 1, 1, 1turn) rotate3d(1, -1, 1, 1turn); } } 

 <div class="cube"> <div class="cube-face"></div> <div class="cube-face"></div> <div class="cube-face"></div> <div class="cube-face"></div> <div class="cube-face"></div> <div class="cube-face"></div> </div>