Fix issue where it does not capture signature on desktop browsers

thread-pond / signature-pad

A jQuery plugin for assisting in the creation of an HTML5 canvas based signature pad. Records the drawn signature in JSON for later regeneration.

BSD 3-Clause "New" or "Revised" License

727 stars 292 forks source link

Fix issue where it does not capture signature on desktop browsers #203

Closed hassaanalansary closed 5 years ago

hassaanalansary commented 5 years ago

Issue: when trying to sign in the box, it just add dots, as opposed to a continuous line. The issue happens on [Chrome 73.0.3683.86 (Official Build) (64-bit), Opera 58.0.3135.107, Edge], Firefox 66.0.1 (64-bit) works very well.
This fix fixes the issue for [Chrome, Opera], however it doesn't fix it for Edge. and still works for Firefox. also tested on [Android Chrome, Android Opera Touch]
Explanation: There is a problem with this.ontouchstart = function (e)doesn't appear to function well, however eddEventListener('touchstart', function(e) does work

mockdeep commented 5 years ago

Excellent, thanks for your contribution @hassaanalansary!

hassaanalansary commented 5 years ago

thank you. Disclaimer: after further testing, I found that with this fix when you start using one input method, it stops the other. meaning that if you start by touching, you can't use your mouse to sign, and vice versa

mockdeep commented 5 years ago

@hassaanalansary it looks like we have a number of places where we set this.ontouchstart = null. Maybe we should change those to remove the event listener instead?

hassaanalansary commented 5 years ago

sorry for the delay I was busy these last 2 days. You are right, It appears in 2 places, after hours of testing, changing them will fix a minor problem. I will create a new pull request and will explain what it fixes there.

curlyroger commented 4 years ago

I'm having this issue on a large kiosk touchscreen where the signature pad is inside an iframe. Inside the frame, I can only get dots and horizontal lines. Outside of the iframe, the signature works fine. But inside the iframe, the behavior appears. This happened recently with a Chrome update and also happens in Firefox too. Any thoughts? I am using the latest version which has this fix in it but it doesn't help.

hassaanalansary commented 4 years ago

@curlyroger does this happen on mobile devices also?

Try to use the older version before my fix. However i don't have any experience with iframes whatsoever.

curlyroger commented 4 years ago

It does not happen on mobile which is weird, makes it very hard to figure out. It's a touchscreen monitor.

The problem appeared while using the older version. I'm stumped.

On Wed, Nov 20, 2019, 11:45 AM hassaanalansary notifications@github.com wrote:

@curlyroger https://github.com/curlyroger does this happen on mobile devices also?

Try to use the older version before my fix. However i don't have any experience with iframes whatsoever.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/thread-pond/signature-pad/pull/203?email_source=notifications&email_token=ADILS3OSXRN7NEDR3WAZSR3QUWHU7A5CNFSM4HBT3PZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEUIACI#issuecomment-556302345, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADILS3NOX45ZD5OETRBAEGTQUWHU7ANCNFSM4HBT3PZA .