Canvas clears itself on iOS 15 due to Safari URL bar window resizes
danjamesmedia opened this issue · comments
Whenever a signature canvas is drawn on iOS 15, the canvas occasionally wipes itself. See attached video, from your official demo.
RPReplay_Final1635161637.mov
@danjamesmedia
Found the root cause of the issue, please check the related PR:
#66
For quick workaround:
Just pass clearOnResize={false}
in props (by default it is true
)
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 passclearOnResize={false}
in props (by default it istrue
)
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 .