fix resize warning

app/javascript/draw.js

@@ -9,6 +9,9 @@ window.customElements.define('draw-signature', class extends HTMLElement {
     this.pad = new SignaturePad(this.canvas)
 
     this.resizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        if (!this.canvas) return
+
         const { width, height } = this.canvas
 
         this.setCanvasSize()
@@ -17,6 +20,7 @@ window.customElements.define('draw-signature', class extends HTMLElement {
           this.redrawCanvas(width, height)
         }
       })
+    })
 
     this.resizeObserver.observe(this.canvas.parentNode)
 

app/javascript/elements/signature_form.js

@@ -12,6 +12,9 @@ export default targetable(class extends HTMLElement {
     this.pad = new SignaturePad(this.canvas)
 
     this.resizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        if (!this.canvas) return
+
         const { width, height } = this.canvas
 
         this.setCanvasSize()
@@ -20,6 +23,7 @@ export default targetable(class extends HTMLElement {
           this.redrawCanvas(width, height)
         }
       })
+    })
 
     this.resizeObserver.observe(this.canvas.parentNode)
 

app/javascript/submission_form/signature_step.vue

@@ -474,6 +474,9 @@ export default {
       this.intersectionObserver.observe(this.$refs.canvas)
 
       this.resizeObserver = new ResizeObserver(() => {
+        requestAnimationFrame(() => {
+          if (!this.$refs.canvas) return
+
           const { width, height } = this.$refs.canvas
 
           this.setCanvasSize()
@@ -482,6 +485,7 @@ export default {
             this.redrawCanvas(width, height)
           }
         })
+      })
 
       this.resizeObserver.observe(this.$refs.canvas.parentNode)
     }