Shoutout to @biberman for discovering that using display: none resolves the issue. I've also found that incorporating pointer-events: none works as well, offering a better solution for my specific needs.
The necessary changes to resolve the problem have been implemented accordingly.
A bug report has been submitted here: https://bugzilla.mozilla.org/show_bug.cgi?id=1715796
script:
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);
}
},
},
CSS:
.page.enable {
pointer-events: all;
}
.page.disable {
pointer-events: none;
}