Estoy usando este gran fragmento para crear un libro animado JS y CSS: https://codepen.io/captain_anonym0us/pen/ybVbpv

Funciona muy bien en Chrome 98 pero actúa de manera diferente en Firefox 97.0 (64 bits).

De alguna manera, un elemento con un índice z en algún lugar en el medio de todos los índices z disponibles parece estar por encima de todo.

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

En este ejemplo, el elemento con índice z 13 parece estar encima de todo en Firefox.

¿Es esto un error o falta algo (adicional) en el código?

¡Gracias por adelantado!