From bc635ccae863e94d0e55a0d58911d4d59f96cd8b Mon Sep 17 00:00:00 2001
From: Michael Chan <michchandev@gmail.com>
Date: Sat, 20 Nov 2021 18:50:06 +0800
Subject: [PATCH] (fix): Fix canvas being constantly cleared on mobile browser
 like Safari on iOS

---
 src/index.js | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/index.js b/src/index.js
index e80ab0c..162c62e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,9 @@ import React, { Component } from 'react'
 import SignaturePad from 'signature_pad'
 import trimCanvas from 'trim-canvas'
 
+const userAgent = window.navigator.userAgent
+const isTouchDevice = userAgent.indexOf("iPhone") >= 0 || userAgent.indexOf("iPad") >= 0 || userAgent.indexOf("Android") >= 0
+
 export default class SignatureCanvas extends Component {
   static propTypes = {
     // signature_pad's props
@@ -26,6 +29,8 @@ export default class SignatureCanvas extends Component {
 
   _sigPad = null
 
+  _windowSize = { width: window.innerWidth, height: window.innerHeight }
+
   _excludeOurProps = () => {
     const { canvasProps, clearOnResize, ...sigPadProps } = this.props
     return sigPadProps
@@ -67,11 +72,28 @@ export default class SignatureCanvas extends Component {
     return this._sigPad
   }
 
-  _checkClearOnResize = () => {
-    if (!this.props.clearOnResize) {
+  _handleResize = (callback) => {
+    if (this._windowSize.width === window.innerWidth &&
+      /**
+       * For touch devices, only compare width as the browser height
+       * might constantly change as user scrolls/touches like on iOS Safari.
+       */
+      (this._windowSize.height === window.innerHeight || isTouchDevice)
+    ) {
       return
     }
-    this._resizeCanvas()
+    // Update window size
+    this._windowSize = { width: window.innerWidth, height: window.innerHeight }
+    callback()
+  }
+
+  _checkClearOnResize = () => {
+    this._handleResize(() => {
+      if (!this.props.clearOnResize) {
+        return
+      }
+      this._resizeCanvas()
+    })
   }
 
   _resizeCanvas = () => {