Stacking with z-index in Firefox
I'm using this great snippet to create a JS and CSS flip book: https://codepen.io/captain_anonym0us/pen/ybVbpv
It works great in Chrome 98 but acts differently in Firefox 97.0 (64-Bit).
Somehow an element with a z-index somewhere in the middle of all available z-indexes seems to be on top of it all.
...
...
In this example, the element with z-index 13 seems to be on top of it all in Firefox.
Is this a bug or is there something (additional) in the code missing?
Thanks in advance!
I'm using this great snippet to create a JS and CSS flip book: https://codepen.io/captain_anonym0us/pen/ybVbpv
It works great in Chrome 98 but acts differently in Firefox 97.0 (64-Bit).
Somehow an element with a z-index somewhere in the middle of all available z-indexes seems to be on top of it all.
<div class="pages">
<div class="page" style="z-index: 29;"></div>
<div class="page"></div>
<div class="page" style="z-index: 27;"></div>
...
<div class="page"></div>
<div class="page" style="z-index: 15;"></div>
<div class="page"></div>
<div class="page" style="z-index: 13;"></div>
<div class="page"></div>
<div class="page" style="z-index: 11;"></div>
<div class="page"></div>
...
<div class="page"></div>
<div class="page" style="z-index: 1;"></div>
</div>
In this example, the element with z-index 13 seems to be on top of it all in Firefox[https://productssale.online/product-category/home-and-kitchen/kitchen-and-dining/cookware/ .]
Is this a bug or is there something (additional) in the code missing?
Thanks in advance!