Mobile browser - Clears the signature on scrolling

[ParthBarot-BoTreeConsulting]

In mobile, when we scroll up/down rapidly the addressbar appears and I think that fires the resize event, so the signature is cleared. Actually it should not happen, as per szimek/signature_pad#318 signature should be cleared on orientationchange event in mobile.

We are trying to change window.addEventListener("resize", this._resizeCanvas.bind(this)); to window.addEventListener("orientationchange", this._resizeCanvas.bind(this)); in here

Can you please suggest a fix?

1. In browser, resize should work as expected, should clear the canvas if the size changes.
2. In mobile, it should works same if we change the orientation, but on scrolling it should work fine.

[ParthBarot-BoTreeConsulting]

@blackjk3 I think I got the solution, As I mentioned above, we need to use resize for non-mobile browsers and orientationchange on mobile browsers.

Now the question is, how to check if its mobile OR non-mobile (Desktop/laptop/iPad) - By checking window.width with actual mobile sizes?

[hollygirouard]

Hey @ParthBarot-BoTreeConsulting - I'm having the same issue here. Were you able to resolve this with the resize? If so, I'd love to know a little more. I have an important launch tomorrow where I'm trying to resolve this.

[ParthBarot-BoTreeConsulting]

@hollyewhite Basically we wanted to avoid the resize event, and that needs to change the code. Instead, I looked at all the forks and found that the latest fork has something ready to use. We have used it and it has allowed us to disable the resize event

https://github.com/agilgur5/react-signature-canvas

I hope this helps.

Thanks

[hollygirouard]

Thank you!

…

On Mon, Nov 27, 2017 at 11:23 AM, Parth Barot ***@***.***> wrote: @hollyewhite <https://github.com/hollyewhite> Basically we wanted to avoid the resize event, and that needs to change the code. Instead, I looked at all the forks and found that the latest fork has something ready to use. We have used it and it has allowed us to disable the resize event https://github.com/agilgur5/react-signature-canvas I hope this helps. Thanks — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#16 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AToRJOa00VoEYrwoYjS4n2cbd_7mn0_7ks5s6pvEgaJpZM4QgY5O> .

[karanjariwala]

@ParthBarot-BoTreeConsulting thanks for helping with this.
Did you turn on and off clearOnResize depending whether it mobile or desktop.
Or did you just clearOnResize={false}. I'm confused since i'm not sure there is a need to clearOnResize ?

[TankutOner]

In my case I solved it like this:
I commented out "canvas.getContext("2d").scale(ratio, ratio);" line. I gave the height and width manually.
function resizeCanvas() {
var ratio = Math.max(window.devicePixelRatio || 1, 1);
var divwidth = $("div[id=tab_guest1]").width() * 0.95;
canvas.width = divwidth;
canvas.height = 240;
//canvas.getContext("2d").scale(ratio, ratio);
signaturePad.clear();
};

And finally I detected browser type and handled the events accordingly.

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
{ window.onorientationchange = resizeCanvas; }
else
{ window.onresize = resizeCanvas; };