Javascript Firefox中堆叠div的内部内容无法正常工作

我已经制作了一本翻页的书的动画。我使用了

z-index

来堆叠页面，它们都以正确的顺序在浏览器UI中翻转和显示，但inspector显示了一些不同的内容

在Firefox中，如果我右键单击第1页并选择inspect，它将转到第4页的元素，我也会在页面上放置输入元素，但在第1页我无法单击并键入。有些页面工作正常，inspector转到正确的元素，我可以输入输入，但当我翻阅页面时，一些页面将停止工作，其他页面将开始工作

这只发生在Firefox中，在Chrome中完全可以正常工作。这是Firefox问题还是我的代码有问题

编辑：

模板：

<template>
<div class="row">
    <div class="col-md-12 mb-3">
        <button class="btn btn-primary" @click="nextPage">next page</button>
        <button class="btn btn-primary" @click="previousPage">previous page</button>
    </div>
    
    <div class="col-md-6">
        <div class="book">
            <span class="front-cover"></span>
            
            <div class="page" v-for="page in pageNums">
                <div class="page-side right">
                    <div class="page-number next" @click="nextPage">{{page[0]}}</div>
                    <input />
                </div>
                <div class="page-side left">
                    <div class="page-number prev" @click="previousPage">{{page[1]}}</div>
                    <input />
                </div>
            </div>
            
            <div class="front-cover">
                <div class="face front">
                    <div class="inner-triangle" @click="openBook"></div>
                    <div class="title">Book</div>
                </div>
                <div class="face back"></div>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
    </div>
</div>
</template>

下一页
上一页
{{page[0]}
{{page[1]}
书

脚本：

<script>
    export default {
        name: 'Book',
        components: {
        },
        data() {
            return {
                bookOpen: false,
                numPages: 7,
                pageNums: [],
                pageNum: 0,
            }
        },
        created() {
            this.addPageNums();
        },
        mounted() {
            this.setPageStackOrder();
        },
        methods: {
            addPageNums() {
                const pages = this.numPages * 2;
                let page = [];
                
                for(let n = 1; n <= pages; n++) {
                    page.push(n);
                    
                    if(page.length === 2) {
                        this.pageNums.push(page);
                        page = [];
                    }
                }
                this.pageNums = this.pageNums.reverse();
            },
            
            setPageStackOrder() {
                for(let n = 0; n < this.numPages; n++) {
                    const page = $(".page").eq(n);
                    page.css("z-index", n+1);
                }
                const cover = $(".front-cover").eq(1);
                cover.css("z-index", 8);
            },
            
            openBook() {
                if(this.bookOpen === false) {
                    this.bookOpen = true;
                    
                    const cover = $(".front-cover").eq(1);
                    cover.addClass("turn");
                    setTimeout( () => {
                        cover.css("z-index", 0)
                    }, 2500);
                }
            },
            
            nextPage() {
                if(this.bookOpen === true && this.pageNum < this.numPages) {
                    this.pageNum++;
                    
                    const zIndex = this.pageNum;
                    const page = $(".page").eq(this.numPages - this.pageNum);
                    page.removeClass("turnBack");
                    page.addClass("turn");
                    setTimeout( () => {
                        page.css("z-index", zIndex);
                    }, 1000);
                }
            },
            
            previousPage() {
                if(this.bookOpen === true && this.pageNum <= this.numPages) {
                    const zIndex = (this.numPages - this.pageNum) + 1;
                    const page = $(".page").eq(this.numPages - this.pageNum);
                    page.removeClass("turn");
                    page.addClass("turnBack");
                    setTimeout( () => {
                        page.css("z-index", zIndex);
                    }, 2200);
                    
                    this.pageNum--;
                }
            },
        },
    }
</script>

导出默认值{
名称：'书'，
组成部分：{
},
数据（）{
返回{
bookOpen:false，
数字：7，
页码：[]，
pageNum:0，
}
},
创建（）{
this.addPageNums（）；
},
安装的（）{
这个.setPageStackOrder（）；
},
方法：{
addPageNums（）{
const pages=this.numPages*2；
设page=[]；
对于（设n=1；n{
cover.css（“z-index”，0）
}, 2500);
}
},
下一页（）{
if（this.bookOpen===true&&this.pageNum{
css（“z-index”，zIndex）；
}, 1000);
}
},
上一页（）{
if（this.bookOpen==true&&this.pageNum{
css（“z-index”，zIndex）；
}, 2200);
这个.pageNum--；
}
},
},
}

CSS:

.书{
位置：相对位置；
显示：-ms flexbox；
显示器：flex；
-ms-flex方向：列；
弯曲方向：立柱；
最小宽度：0；
透视图：220rem；
}
.封面{
背景色：#36354e；
颜色：白色；
字体大小：粗体；
位置：绝对位置；
变换样式：保留-3d；
变换原点：0.100%；
排名：0；
右：0；
宽度：50%；
身高：17.5雷姆；
填充：1rem；
边界半径：0 5px 5px 0；
框大小：边框框；
}
.脸{
位置：绝对位置；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.正面{
排名：0；
右：0；
身高：100%；
宽度：100%；
-webkit变换：旋转（0度）；
}
.正面{
排名：0；
右：0；
填充：40%0；
文本对齐：居中；
身高：100%；
宽度：100%；
变换：旋转（-180度）；
}
.前盖{
动画：书打开3s向前；
}
@打开书本的关键帧{
0%  {
变换：旋转（0度）；
}
100% {
变换：旋转（-180度）；
}
}
.头衔{
填充：40%0；
文本对齐：居中；
字体大小：25px；
颜色：暗灰色；
}
.内三角形{
左边框：20px实心透明；
右边框：20px纯绿；
边框底部：20px实心透明；
身高：0；
宽度：0；
位置：绝对位置；
右：0；
z指数：2；
}
.第页{
背景色：#e9e6c4；
颜色：#777；
位置：绝对位置；
变换样式：保留-3d；
透视图：120rem；
变换原点：0.100%；
顶部：0.25雷姆；
右：1%；
宽度：49%；
身高：17雷姆；
盒影：插入3px 0px 20px rgba（0,0,0,0.2），
0px 0px 15px rgba（0,0,0,0.1）；
}
.页边{
位置：绝对位置；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.页边.右{
排名：0；
右：0；
身高：100%；
宽度：100%；
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
.页面左侧{
排名：0；
右：0；
身高：100%；
宽度：100%；
-webkit变换：旋转（-180度）；
变换：旋转（-180度）；
}
.翻页{
动画：下一页3s向前；
}
@关键帧下一页{
0%  {
变换：旋转（0度）；
}
100% {
变换：旋转（-180度）；
}
}
.翻页{
动画：前3页向后；
动画方向：反向；
}
@页面上的关键帧{
0%  {
变换：旋转（0度）；
}
100% {
变换：旋转（-180度）；
}
}
.页码{
<style scoped>
    .book {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        min-width: 0;
        perspective: 220rem;
    }
    
    .front-cover {
        background-color: #36354e;
        color: white;
        font-weight: bold;
        position: absolute;
        transform-style: preserve-3d;
        transform-origin: 0 100%;
        top: 0;
        right: 0;
        width: 50%;
        height: 17.5rem;
        padding: 1rem;
        border-radius: 0 5px 5px 0;
        box-sizing: border-box;
    }

    .face {
        position: absolute;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .face.front {
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
        -webkit-transform:rotateY(0deg);
    }

    .face.back {
        top: 0;
        right: 0;
        padding: 40% 0;
        text-align: center;
        height: 100%;
        width: 100%;
        transform: rotateY(-180deg);
    }
    
    .front-cover.turn {
        animation: bookOpen 3s forwards;
    }
    
    @keyframes bookOpen {
        0%  {
            transform: rotateY(0deg);
        }
        100% {
            transform: rotateY(-180deg);
        }
    }
    
    .title {
        padding: 40% 0 0 0;
        text-align: center;
        font-size: 25px;
        color: darkgrey;
    }

    .inner-triangle {
        border-left: 20px solid transparent;
        border-right: 20px solid green;
        border-bottom: 20px solid transparent;
        height: 0;
        width: 0;
        position: absolute;
        right: 0;
        z-index: 2;
    }
    
    .page {
        background-color: #e9e6c4;
        color: #777;
        position: absolute;
        transform-style: preserve-3d;
        perspective: 120rem;
        transform-origin: 0 100%;
        top: 0.25rem;
        right: 1%;
        width: 49%;
        height: 17rem;
        box-shadow: inset 3px 0px 20px rgba(0, 0, 0, 0.2),
                          0px 0px 15px rgba(0, 0, 0, 0.1);
    }

    .page-side {
        position: absolute;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .page-side.right {
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
        -webkit-transform:rotateY(0deg);
        transform: rotateY(0deg);
    }

    .page-side.left {
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
        -webkit-transform:rotateY(-180deg);
        transform: rotateY(-180deg);
    }

    .page.turn {
        animation: nextPage 3s forwards;
    }

    @keyframes nextPage {
        0%  {
            transform: rotateY(0deg);
        }
        100% {
            transform: rotateY(-180deg);
        }
    }

    .page.turnBack {
        animation: prevPage 3s backwards;
        animation-direction: reverse;
    }

    @keyframes prevPage {
        0%  {
            transform: rotateY(0deg);
        }
        100% {
            transform: rotateY(-180deg);
        }
    }
    
    .page-number {
        font-size: 0.7rem;
        color: #0000FF;
        cursor: pointer;
    }
    
    .page-number.next {
        padding: 5px 10px 0 0;
        text-align: right;
    }
    
    .page-number.prev {
        padding: 5px 0 0 10px;
        text-align: left;
    }
</style>

    export default {
        data() {
            return {
                pageNum: 1,
            }
        },
        methods: {
            openBook() {
                if(this.bookOpen === false) {
                    this.setPageStackOrder();
                    this.bookOpen = true;
                    
                    const cover = $(".front-cover").eq(1);
                    cover.addClass("turn");
                    setTimeout( () => {
                        cover.css("z-index", 0)
                    }, 2500);
                    
                    const page = $(".page").eq(this.numPages - this.pageNum);
                    page.removeClass("disable");
                    page.addClass("enable");
                }
            },

            setPageStackOrder() {
                for(let n = 0; n < this.numPages; n++) {
                    const page = $(".page").eq(n);
                    page.css("z-index", n+1);
                    page.addClass("disable")
                }
                const cover = $(".front-cover").eq(1);
                cover.css("z-index", 8);
            },
            
            SetPageEvents(direction) {
                const cur = this.numPages - this.pageNum;
                const next = (direction === "forward") ? cur - 1 : cur + 1;
                const prev = (direction === "forward") ? cur + 1 : cur - 1;
                const page = $(".page").eq(cur);
                const nextPage = $(".page").eq(next);
                const prevPage = $(".page").eq(prev);
                
                page.addClass("enable");
                page.removeClass("disable");
                nextPage.addClass("enable");
                nextPage.removeClass("disable");
                prevPage.addClass("disable");
                prevPage.removeClass("enable");
            },
            
            nextPage() {
                if(this.bookOpen === true && this.pageNum <= this.numPages) {
                    const page = $(".page").eq(this.numPages - this.pageNum);
                    const zIndex = this.pageNum;
                    
                    this.SetPageEvents("forward");
                    page.removeClass("turnBack");
                    page.addClass("turn");
                    setTimeout( () => {
                        page.css("z-index", zIndex);
                    }, 1000);
                    
                    this.pageNum++;
                }
            },
            
            previousPage() {
                if(this.bookOpen === true && this.pageNum > 0) {
                    this.pageNum--;
                    const page = $(".page").eq(this.numPages - this.pageNum);
                    const zIndex = (this.numPages - this.pageNum);
                    
                    this.SetPageEvents("backward");
                    page.removeClass("turn");
                    page.addClass("turnBack");
                    setTimeout( () => {
                        page.css("z-index", zIndex);
                    }, 2200);
                }
            },
        },

.page.enable {
    pointer-events: all;
}

.page.disable {
    pointer-events: none;
}