Canvas clears itself on iOS 15 due to Safari URL bar window resizes

[danjamesmedia]

Whenever a signature canvas is drawn on iOS 15, the canvas occasionally wipes itself. See attached video, from your official demo.

https://user-images.githubusercontent.com/17359862/138688141-5b6b0ede-af95-47d0-8581-87f52bc93e0d.mov

[michchan]

@danjamesmedia Found the root cause of the issue, please check the related PR: https://github.com/agilgur5/react-signature-canvas/pull/66

For quick workaround: Just pass clearOnResize={false} in props (by default it is true)

[agilgur5]

Ack, this issue seems very similar to Chrome for Android and iOS Safari resizing the window height due to the URL bar fading in/out. That looks like a URL bar in your video too, but just at the bottom in iOS 15(?).

Have had the pain of dealing with the URL bar in various front-end projects, but usually it only affected my responsive CSS (e.g. vh units, height media queries, etc), didn't realize that impacted react-signature-canvas's resize detection too, big oof.

Will have to think of an optimal strategy to deal with that and remember what I used in other projects to workaround it.

For quick workaround: Just pass clearOnResize={false} in props (by default it is true)

That should indeed work as a quick workaround, but for all readers, please be aware that that is an advanced usage prop and has some drawbacks/side-effects when used without any other changes, as described in #43 .