stacking divs with css for Firefox

Question

I am trying to do a website with a loading animation. This loading animation shows well above all other divs in Chrome, but not in Firefox. I have a menu bar, a main div, and a footer. In the main div, I have a "main box" (will rotate in 3D) and a loading div. The loading div hosts the animation for loading. Html is kind of the following:

<div id="site">
    <div id="menuDiv" class="mainSection"> Menu bar</div>
    <div id="mainDiv" class="mainSection">
        <div id="mainBox">
            <div class="mainBoxSide front">
            </div>
            <div class="mainBoxSide right">
            </div>
            <div class="mainBoxSide back">
            </div>
            <div class="mainBoxSide left">
            </div>
        </div>
        <div id="loadingDiv">
            <div id="loadingBox">
                <div class="loadingBoxSide loading-front"></div>
                <div class="loadingBoxSide loading-right"></div>
                <div class="loadingBoxSide loading-back"></div>
                <div class="loadingBoxSide loading-left"></div>
            </div>
        </div>

   </div>
</div>
<div id="footer" class="mainSection">Footer</div>

I want mainDiv to be on top of the footer, and loadingDiv on top of mainBox. So in term of z-index : footer < mainBox < loadingDiv.

I created a codepen which isolates the problem: https://codepen.io/3MO/pen/vmOMEG

When opened in Chrome, everything works fine. When opened in Firefox, the animation is flickering: it goes on top and on background of the mainBox element all the time, and I don't know why.

There is worse: if I provide a background color to the loading div, everything works fine: I created another codepen, the exact fork and defined a background color for loadingDiv: https://codepen.io/3MO/pen/XRbQjQ

Can someone know why it behaves like this? I need to work with a transparent div, so without any background color.

Thanks!

Answer 1

Try adding transform: translate3d(0,0,1px); to the div #loadingDiv.