Set a z-index for the different layers within a page (fixes #15861)

Each layer has an absolute position, hence it induces the creation of
some stacking contexts (see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).
Thanks to this feature, we don't have to worry about the z-index used in
the annotation layer and how form elements interact with the other layers.
This commit is contained in:
Calixte Denizet 2022-12-22 21:55:25 +01:00
parent e49dd525b0
commit c677b167b6
5 changed files with 7 additions and 15 deletions

View File

@ -60,7 +60,7 @@
font-size: calc(100px * var(--scale-factor));
transform-origin: 0 0;
cursor: auto;
z-index: 20000;
z-index: 4;
}
.annotationEditorLayer.freeTextEditing {

View File

@ -44,6 +44,7 @@
left: 0;
pointer-events: none;
transform-origin: 0 0;
z-index: 3;
}
.annotationLayer section {

View File

@ -804,19 +804,7 @@ class PDFPageView {
// overflow will be hidden in Firefox.
const canvasWrapper = document.createElement("div");
canvasWrapper.classList.add("canvasWrapper");
if (this.textLayer) {
this.textLayer.div.before(canvasWrapper);
} else {
const lastDivBeforeTextDiv =
this.annotationLayer?.div || this.annotationEditorLayer?.div;
if (lastDivBeforeTextDiv) {
// The annotation layer needs to stay on top.
lastDivBeforeTextDiv.before(canvasWrapper);
} else {
div.append(canvasWrapper);
}
}
div.append(canvasWrapper);
if (
!this.textLayer &&
@ -830,7 +818,7 @@ class PDFPageView {
accessibilityManager: this._accessibilityManager,
isOffscreenCanvasSupported: this.isOffscreenCanvasSupported,
});
canvasWrapper.after(this.textLayer.div);
div.append(this.textLayer.div);
}
if (

View File

@ -55,6 +55,7 @@
overflow: hidden;
width: 100%;
height: 100%;
z-index: 1;
}
.pdfViewer .page {
@ -156,6 +157,7 @@
right: 0;
bottom: 0;
background: url("images/loading-icon.gif") center no-repeat;
z-index: 5;
}
.pdfViewer .page .loadingIcon.notVisible {
background: none;

View File

@ -26,6 +26,7 @@
text-size-adjust: none;
forced-color-adjust: none;
transform-origin: 0 0;
z-index: 2;
}
.textLayer span,