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.

<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.

Is this a bug or is there something (additional) in the code missing?

Thanks in advance!