Signature not working Google Chrome, mobile devices (width >= 1080)

[cristhianDt]

Hi,

First thank you for your work.

Secondly, I have a problem with some mobile devices (smart phones and tablets) of width greater than or equal to 1080 pixels (like HTC M9 Plus, Moto g (6) and Moto g5 Plus, Samsung SM-T385M). In these devices the signature doesn't work, when I try to sign, the page do a scroll (up or down) and only draw a point into the canvas (look the image). The issue only happen in Google Chrome, in Firefox works fine (with one or more signatures). In other case with more than one signature, only the first signature works and the others doesn't work -Google Chrome-.

Watching the browser console I found this error:
[Intervention] Ignored attempt to cancel a touch event with cancelable = false, for example because scrolling is in progress and cannot be interrupted signature-pad.js:63

In this line:
this._handleTouchEnd = function (event) { var wasCanvasTouched = event.target === self._canvas; if (wasCanvasTouched) { event.preventDefault(); self._strokeEnd(event); } };

I changed it to:
this._handleTouchEnd = function (event) { var wasCanvasTouched = event.target === self._canvas; if (wasCanvasTouched && event.cancelable) { event.preventDefault(); self._strokeEnd(event); } };

The error in the console stopped to appearing, but the signature not working yet. I tried with version 2.3.0 and does not work either.

Maybe do you have any idea about it?. Thanks.

[szimek]

I got no idea why it might be happening. Could you add a listener for scroll event and see if the error message is right, i.e. there's "scrolling in progress"?

BTW. Could you set up a demo somewhere? I've got Android tablet, which probably has resolution higher than 1080.

[cristhianDt]

Sorry for the delay.

Yes, I can.

Let me see if I can set up a demo for you.

[cristhianDt]

@szimek ,

Codepen:

• Editor: https://codepen.io/cristhiandt/pen/bZmBQx?editors=1111
• Test in your tablet: https://codepen.io/cristhiandt/full/bZmBQx

I added a listener for scroll event, "scrolling" open the browser console.

[cristhianDt]

@szimek

[cristhianDt]

Hi,

Have you been able to check it? @szimek :C

[Steeveuk]

Hi,

I had this same issue, I think I've fixed it by implementing the following within an on window load & window resize function (I am also using jQuery):

$('canvas.sig_canvas').each(function(){
  var id = $(this).attr('id'); //Get the ID of signature
  var width = $(this).closest('.sig_container').width(); //Get the width of the signature container
  sig_pads[id].off(); //Unbind all events on signature pad (I have an array of them)

  if(!$(this).data('prev_width') || Math.abs(width - $(this).data('prev_width')) > 30){ //Resize threshold 30px, only resize if previous width has changed by 30 pxs
    var ctx = $(this)[0].getContext('2d'); //Get context
    $(this).attr('width', width); //Set canvas width
    ctx.canvas.width  = width; //Set context width
    $(this).data('prev_width', width); //Update prev_width for threshold
  }
  sig_pads[id].on(); //Rebind all signature events
});

I am not sure if it was unbinding and rebinding or if it was setting a canvas width as well as context width that seems to have fixed it.

Hope this helps you.

[DvirH]

According to @Steeveuk things, Just use the SignaturePadInstance.off() and re enable by SignaturePadInstance.on()