Window 8 Tablet

[miker42]

I have implemented the Signature Pad in an asp.net, c# application and it works fine on an iPad and Android tablet. It also works fine on a PC running IE 10 using a mouse. But it does not work on a Windows 8 Tablet. When trying to create a signature all it will do is create a dot wherever you start to sign. The entire web page moves as if you are trying to scroll the page as you try to create to signature. I suspect this is the reason it fails. Any ideas as to how to correct this?

[thomasjbradley]

I'm having some troubles with Win 8 devices because I don't have one to test. I've tried a couple things but am not sure of the cause.

[meagar]

@miker42

TLDR; you need to apply the style -ms-touch-action: none to your element.

We hit the same issue about 8 months ago, you just need to apply the above vendor-specific style to tell IE10 that the element has some extra-ordinary user interaction and shouldn't be treated like a drag handle for the window.

Our CSS looks like this (I'm certain that the rule doesn't need to be applied to both the container and the canvas, I think I was lazy when I fixed the issue), given our markup of roughly <div class="signature-pad"><canvas with="700" height="150" /></div>:

.signature-pad {
  -ms-touch-action: none;
}

.signature-pad canvas {
  -ms-touch-action: none;
}

I'm actually just about to try and find the Android equivalent.

---

Just noticed that the CSS included with the project actually provides many rules for disabling dragging for signature elements, but they're only applied to .current .pad:

-ms-touch-action: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

[thomasjbradley]

Is it possible that we need the CSS property on a wrapper element also for it to work properly?

[thomasjbradley]

It seems that my CSS had a selector .current .pad, that doesn't seem to work properly. Changing the selector to just .pad fixes the problem. It'll be fixed in 2.4.2.