brinley / jSignature

jQuery plugin for adding web signature functionality
http://www.unbolt.net/jSignature
696 stars 529 forks source link

Jsignature on IE10 touch mode #29

Closed kakons closed 8 years ago

kakons commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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/brinley/jSignature/issues/29#issuecomment-15350423 .

brinley commented 11 years ago

Was the dots something new from before my change?

brinley commented 11 years ago

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 commented 11 years ago

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/brinley/jSignature/issues/29#issuecomment-15701413 .

brinley commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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 commented 10 years ago

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. image

hareeshav commented 10 years ago

Thanks jwitt98. Issue got fixed by applying the fix

signatureDiv{

-ms-touch-action: none; }

martin-sweeny commented 10 years ago

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 commented 9 years ago

+1

This worked:

signatureDiv{

-ms-touch-action: none; }

MickL commented 8 years ago

For Win 10 + Edge, see: https://github.com/brinley/jSignature/issues/95