Merge pull request #15578 from calixteman/15571

[Editor] Ink editors must have their dimensions in percents after having been resized

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

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);
       }
     });