Unable to draw signature on Chrome for Android

[ChrisKaelin]

At first I thought this error was because of how we implemented the signature pad into our web application, however the example page behaves in the same manner.
If you zoom in on the 'Accept a Signature' example page but the page is not scrolled at all, the signature pad behaves normally. However, if you are zoomed in and scroll the page, then the signature pad does not work.
This only seems to be affecting the Chrome browser, as the behavior in Firefox and the default Android browser shows no difference between the two situations.

[thomasjbradley]

I remember there being a similar problem before related to iPhone, so I put some code in to work around that.

It's this line here: https://github.com/thomasjbradley/signature-pad/blob/gh-pages/jquery.signaturepad.js#L662

Maybe something similar would work...

[ChrisKaelin]

A co-worker and I came up with the following solution that appears to be working in every case we have tested so far. Created the following function function getTotalOffset(element) { if (element) { var parentOffset = getTotalOffset(element.offsetParent); return { left: (element.offsetLeft + parentOffset.left), top: (element.offsetTop + parentOffset.top) }; } else { return { left: 0, top: 0 }; } }

and then modified where the offset is calculated to call the new function when needed. if (/Android/i.test(navigator.userAgent) && !(/Firefox|SamsungBrowser/i.test(navigator.userAgent))) { offset = getTotalOffset(canvasContext.canvas) } else { offset = $(e.target).offset(); }

[martincarlin87]

@ChrisKaelin would you mind giving some more details on the changes you implemented, i.e. where those modifications are?

Even a gist of the updated file would be a big help.

Cheers, Martin

[powpow60]

Thanks ChrisKaelin. Your solution works great - saved me some time!

[ENGAbdullahMamun]

Please can anyone explain properly...