diff --git a/app/javascript/draw.js b/app/javascript/draw.js index f8d7ca19..2a0a917c 100644 --- a/app/javascript/draw.js +++ b/app/javascript/draw.js @@ -9,13 +9,17 @@ window.customElements.define('draw-signature', class extends HTMLElement { this.pad = new SignaturePad(this.canvas) this.resizeObserver = new ResizeObserver(() => { - const { width, height } = this.canvas + requestAnimationFrame(() => { + if (!this.canvas) return - this.setCanvasSize() + const { width, height } = this.canvas - if (this.canvas.width !== width || this.canvas.height !== height) { - this.redrawCanvas(width, height) - } + this.setCanvasSize() + + if (this.canvas.width !== width || this.canvas.height !== height) { + this.redrawCanvas(width, height) + } + }) }) this.resizeObserver.observe(this.canvas.parentNode) diff --git a/app/javascript/elements/signature_form.js b/app/javascript/elements/signature_form.js index d4305adc..b7ce43e5 100644 --- a/app/javascript/elements/signature_form.js +++ b/app/javascript/elements/signature_form.js @@ -12,13 +12,17 @@ export default targetable(class extends HTMLElement { this.pad = new SignaturePad(this.canvas) this.resizeObserver = new ResizeObserver(() => { - const { width, height } = this.canvas + requestAnimationFrame(() => { + if (!this.canvas) return - this.setCanvasSize() + const { width, height } = this.canvas - if (this.canvas.width !== width || this.canvas.height !== height) { - this.redrawCanvas(width, height) - } + this.setCanvasSize() + + if (this.canvas.width !== width || this.canvas.height !== height) { + this.redrawCanvas(width, height) + } + }) }) this.resizeObserver.observe(this.canvas.parentNode) diff --git a/app/javascript/submission_form/signature_step.vue b/app/javascript/submission_form/signature_step.vue index d5726b67..d7cb86fb 100644 --- a/app/javascript/submission_form/signature_step.vue +++ b/app/javascript/submission_form/signature_step.vue @@ -474,13 +474,17 @@ export default { this.intersectionObserver.observe(this.$refs.canvas) this.resizeObserver = new ResizeObserver(() => { - const { width, height } = this.$refs.canvas + requestAnimationFrame(() => { + if (!this.$refs.canvas) return - this.setCanvasSize() + const { width, height } = this.$refs.canvas - if (this.$refs.canvas.width !== width || this.$refs.canvas.height !== height) { - this.redrawCanvas(width, height) - } + this.setCanvasSize() + + if (this.$refs.canvas.width !== width || this.$refs.canvas.height !== height) { + this.redrawCanvas(width, height) + } + }) }) this.resizeObserver.observe(this.$refs.canvas.parentNode)