diff --git a/src/display/editor/editor.js b/src/display/editor/editor.js index 368aa2da9..f925b7f7d 100644 --- a/src/display/editor/editor.js +++ b/src/display/editor/editor.js @@ -219,6 +219,24 @@ class AnnotationEditor { this.div.style.height = `${(100 * height) / parentHeight}%`; } + fixDims() { + const { style } = this.div; + const { height, width } = style; + const widthPercent = width.endsWith("%"); + const heightPercent = height.endsWith("%"); + if (widthPercent && heightPercent) { + return; + } + + const [parentWidth, parentHeight] = this.parent.viewportBaseDimensions; + if (!widthPercent) { + style.width = `${(100 * parseFloat(width)) / parentWidth}%`; + } + if (!heightPercent) { + style.height = `${(100 * parseFloat(height)) / parentHeight}%`; + } + } + /** * Get the translation used to position this editor when it's created. * @returns {Array} diff --git a/src/display/editor/ink.js b/src/display/editor/ink.js index 66e3ad2bb..81d4129db 100644 --- a/src/display/editor/ink.js +++ b/src/display/editor/ink.js @@ -27,6 +27,10 @@ import { opacityToHex } from "./tools.js"; // so each dimension must be greater than RESIZER_SIZE. const RESIZER_SIZE = 16; +// Some dimensions aren't in percent and that leads to some errors +// when the page is zoomed (see #15571). +const TIME_TO_WAIT_BEFORE_FIXING_DIMS = 100; + /** * Basic draw editor in order to generate an Ink annotation. */ @@ -599,9 +603,20 @@ class InkEditor extends AnnotationEditor { * Create the resize observer. */ #createObserver() { + let timeoutId = null; this.#observer = new ResizeObserver(entries => { const rect = entries[0].contentRect; if (rect.width && rect.height) { + // Workaround for: + // https://bugzilla.mozilla.org/show_bug.cgi?id=1795536 + if (timeoutId !== null) { + clearTimeout(timeoutId); + } + timeoutId = setTimeout(() => { + this.fixDims(); + timeoutId = null; + }, TIME_TO_WAIT_BEFORE_FIXING_DIMS); + this.setDimensions(rect.width, rect.height); } });