Jsignature on IE10 touch mode

[kakons]

Hi, I'm trying to use jsignature on ie10 with touch screen, touch move events not recognized.

Any way to work only with flash canvas instead of html5 ?

Will you support Ie10 on touch screen ?

Thank's head

Shlomi

[brinley]

The issue with the touch events is not related to flash canvas or html5.
Its because Microsoft decided to handle touch events differently.
I'll take a look when I get a chance but I won't beable to test as I don't have a Windows 8 touch device.

[kakons]

It's working on other signature plugin on flash canvas. Any way to set it always on flash canvas instead of html5 canvas temporarly ?

נשלח מה-iPhone שלי

ב-18 בפבר 2013, בשעה 08:05, Brinley Ang notifications@github.com כתב/ה:

The issue with the touch events is not related to flash canvas or html5.
Its because Microsoft decided to handle touch events differently.
I'll take a look when I get a chance but I won't beable to test as I don't have a Windows 8 touch device.

—
Reply to this email directly or view it on GitHub.

[brinley]

I've just pushed up a possible fix. Problem is I dont have a IE10 touch device to test with.
Can you go to http://www.unbolt.net/jSignature/ with your surface and see if it works?
Thanks

[kakons]

Unfortunately still not working, drawing with a mouse also works fine and
with finger does not work - see only dots on the screen.
The problem appears only with a browser IE10. My opinion as a temporary
solution to set a Flash Canvas.

2013/3/24 Brinley Ang notifications@github.com

I've just pushed up a possible fix. Problem is I dont have a IE10 touch
device to test with.
Can you go to http://www.unbolt.net/jSignature/ with your surface and see
if it works?
Thanks

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/29#issuecomment-15350423
.

[brinley]

Was the dots something new from before my change?

[brinley]

Clear your cache and try again on my page. I've just pushed up another fix that would hopefully get the pointermove translated correctly.
Flash canvas is a temporary solution but I prefer a long term solution.

[kakons]

Hi, I still see only dots on the screen when I move my finger on the screen.

2013/4/1 Brinley Ang notifications@github.com

Clear your cache and try again on my page. I've just pushed up another fix
that would hopefully get the pointermove translated correctly.
Flash canvas is a temporary solution but I prefer a long term solution.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/29#issuecomment-15701413
.

[brinley]

Do you see dots when you first touch the screen or dots as your move your finger on the screen ie the dots line up but just not connected?

[nerd-wp]

I have the same problem. For each stroke that you make with your finger only the first point is displayed. It would seem that IE touch takes over after the first point as the screen moves in the direction that one is stroking. I tried using -ms-touch-action:none; on the signature containing div which stops the screen from moving when stroking inside the signature area, but no dots are produced (I assume your events don't get fired). I would be happy to test any changes you make on my Windows 8 tablet.

[nerd-wp]

I just tried the following and it is now semi working:

I set the containing div with -ms-touch-action:double-tap-zoom;

    #signatureDiv  {           
        margin-top: 1em;
        margin-bottom: 1em;
        width:400px;
        height:200px;

        -ms-touch-action:double-tap-zoom;

        display:inline-block;
    } 

    /*This is the div within which the signature canvas is fitted*/
    #signature {
        border: 2px dotted black;
        background-color: lightgrey;
       width:100%;height:100%;

    }

It works at normal scale but if you double tap and zoom up then it does not render the stroke (the stroke is there because the undo appears, its just not visible). If you zoom back to normal scale it continues to work.

Hope this help a bit.

[brinley]

If you zoomed in just a little, does the stroke render? I'm just wondering if the stroke is rendering off the canvas because the zoom has changed the offset calculations.

Can you also try adding either and both of the following in addition to -ms-touch-action:double-tap-zoom;
-ms-content-zooming: none;
-ms-content-zoom-limit: 100% 100%;

[jwitt98]

The problem I saw was that IE 10 in windows 8 wants to scroll and pan (what it typically does when you touch and move your finger around) when you try to sign instead of staying stationary. The end result is that you just end up making a few random marks when you sign that look like dots. What worked for me was adding the following CSS to the div containing the signature:
#signatureDiv{
-ms-touch-action: none;
}
Now, I've notice another problem... when you zoom in your screen , like say after doing a double tap on the screen, the signature becomes displaced and displays well above where you are actually signing.

[hareeshav]

Hi,
I'm also facing the same issue. In Surface tablet with Win8 IE-11 , I ended up with dots. I have already implemented JSignature in my application and it works well with Android and ios devices. Please provide me a solution to fix this issue.

[hareeshav]

Thanks jwitt98. Issue got fixed by applying the fix
#signatureDiv{
-ms-touch-action: none;
}

[martin-sweeny]

I am having the same issue and hareeshav's solution did not work for me. I am using IE11 on Windows 7 with a touchscreen monitor.

I am able to draw only if I start dragging to the left or right first, but not if I drag up or down

[xacaxulu]

+1

This worked:

#signatureDiv{
-ms-touch-action: none;
}

[MickL]

For Win 10 + Edge, see: #95