css zoom causes proportional offset in signature

[kaeverens]

if the (non-standard) CSS property 'zoom' is applied to the canvas or any of its parents, then the x/y positions of the drawn signature will be off in proportion to the zoom.

I have tested this in touch devices, not mouse-driven devices.

[kaeverens]

I've no idea how to push to someone else's git repository, but here's what I added to jquery.signaturepad.js (insert at line 200) to fix the problem:

// { handle css zoom
function getZoom(el) {
  if (!el || el===document) {
    return 1;
  }
  var z=+$(el).css('zoom');
  if (!z) {
    return 1;
  }
  z*=getZoom(el.parentNode);
  return z;
}
var zoom=getZoom(canvas[0]);
newX/=zoom;
newY/=zoom;
// }

[thomasjbradley]

The zoom property is affecting devices that don’t have IE on them?

[kaeverens]

Yes. I was surprised as well as it is not "official" CSS, but it's actually quite useful.

http://css-tricks.com/almanac/properties/z/zoom/

My current usecase is an Android app that I am scaling so that the screen is a precise width. I use the following CSS (for example) to zoom to 480px:

@media screen and (width:320px) {
    html{
        zoom:66.666%;
    }
}
@media screen and (width:360px) {
    html{
        zoom:75%;
    }
}

Almost everything works nicely. I had to hack jQuery-UI (dialog positions) and your sigPad to get them to play well, but it wasn't a hard problem.

[thomasjbradley]

That's crazy. Thanks for letting me know.

[kaeverens]

this may or may not become a standard CSS rule. feel free to close this issue as "will not fix" if you think it will not be useful ;-)

[thomasjbradley]

I'll definitely file that under the look into in the future list. Cheers.

[ChrisKaelin]

@kaeverens, you say that you added your fix to line 200, but that might have changed since that post. Can you give an update on what is right before your addition?

[kaeverens]

In the function drawLine, place the code just after the first 'if/else' block.