Issue using finger on touch screen with new update in windows 10

[guylap]

Hello, there seems to be an issue when using the finger on some laptop Dell Latitude 3189 touch screen.
It started on some of my clients, probably because a Windows 10 update...
When using finger, it does not write the signature. Works only with the mouse.
I have tried with jqSignature and it works but jqSignature does not have base30 to export and I would like to keep using jSignature.
Any ideas what is going on ?
Thanks

[brinley]

What browser is giving issues?
Did you try on multiple browsers?
Can you try http://brinley.github.io/jSignature on different browsers?

[guylap]

Hello, I have tried with Chrome (Latest update) and Microsoft Edge on Windows 10 1803 latest update. They both did not work with the touchsreen, only with mouse... Thanks

…

On Oct 31, 2018, 1:06 AM -0400, Brinley Ang ***@***.***>, wrote: What browser is giving issues? Did you try on multiple browsers? Can you try http://brinley.github.io/jSignature on different browsers? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[guylap]

Also, I have tried with Ipad and Iphone using Chrome and they both work with finger. Seems to be only with Windows 10... Thanks

…

On Oct 31, 2018, 1:06 AM -0400, Brinley Ang ***@***.***>, wrote: What browser is giving issues? Did you try on multiple browsers? Can you try http://brinley.github.io/jSignature on different browsers? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[geland]

We are experiencing the same issue in our implementation and at http://brinley.github.io/jSignature. After the Windows update on Tuesday, October 30, you can no longer effectively use the touch screen to sign in Chrome or Edge (on an MS Surface). It does still work in Firefox. Touching within the signature area draws a dot, but dragging your finger just attempts to scroll the page or navigate away from the page. It is as if the press-and-hold behavior does not trigger properly in the signature area.

Signing does work with a mouse click-and-hold or with the surface pen/stylus click-and-hold (holding the side button while you draw).

[geland]

Strangely enough, if I turn on device emulation in chrome on the MS Surface, then touch-and-drag to sign works. Perhaps the emulation mode still uses a different/older way of handling touch events?

[brinley]

I don't have a Windows 10 touch screen to test with.

Can you please check if window.navigator.msPointerEnabled returns different values in device emulation mode vs the non working mode?

[bkdotcom]

Edge & chrome (non-touch device): window.navigator.msPointerEnabled is undefined for both

Emulation in Chrome does not duplicate the issue
Emulation in Edge duplicates the issue

While in emulation mode, the issue appears to be within getPointFromEvent()
it's generating negative coordinates (outside the canvas) (firstEvent.pageY and/or shiftY seems to be wrong)

[geland]

In Chrome window.navigator.msPointerEnabled is undefined in emulation and non-emulation mode.

Another fun fact: If I turn on emulation in Chrome, and then turn off emulation mode, it works for the current page session. After page load while emulation mode is off returns it to a non-working state.

There are some folks complaining about drag-and-drop features no longer working after the recent Windows update - perhaps this could be related? https://social.msdn.microsoft.com/Forums/en-US/99525cc5-9b80-4c18-b81b-d36703a701a0/after-windows-1803-update-icopyhookcopycallback-pszdestfile-parameter-comes-empty?forum=windowsgeneraldevelopmentissues

[kcloud99]

I just diff-ed the window.navigator object between Firefox(working), Chrome(not working), Chrome in emulation mode(working), and Edge(not working). The only real differences I could find are:

1. Only Chrome (non-emulation mode) has any info in the "mimeTypes" array.
2. userAgent is slightly different
3. msManipulationViewsEnagled: true => Only shows up on Edge browser
4. maxTouchPoints
   -Chrome (non-emulation): 10
   -Chrome(emulation): 1
   -Firefox: 0
   -Edge: 10

[bkdotcom]

canvas.ontouchstart = function(e) {} doesn't appear to function
however
canvas.eddEventListener('touchstart', function(e) {} does work

changing this

		canvas.ontouchstart = function(e) {
			canvas.onmousedown = undef
			canvas.onmouseup = undef
			canvas.onmousemove = undef

			this.fatFingerCompensation = (
				settings.minFatFingerCompensation && 
				settings.lineWidth * -3 > settings.minFatFingerCompensation
			) ? settings.lineWidth * -3 : settings.minFatFingerCompensation

			drawStartHandler(e)

			canvas.ontouchend = drawEndHandler
			canvas.ontouchstart = drawStartHandler
			canvas.ontouchmove = drawMoveHandler
		}

to this

		canvas.addEventListener('touchstart', function(e) {
			canvas.onmousedown = undef
			canvas.onmouseup = undef
			canvas.onmousemove = undef

			this.fatFingerCompensation = (
				settings.minFatFingerCompensation &&
				settings.lineWidth * -3 > settings.minFatFingerCompensation
			) ? settings.lineWidth * -3 : settings.minFatFingerCompensation

			drawStartHandler(e)

			canvas.addEventListener('ontouchend', drawEndHandler)
			canvas.addEventListener('touchstart', drawStartHandler);
			canvas.addEventListener('touchmove', drawMoveHandler);
		});

seems to fix the issue

perhaps something was overriding .ontouchstart ?

[guylap]

Great !
Thanks to everyone that participated.
Everything is working fine with this fix.

[brinley]

@guylap @bkdotcom Can you guys please help test #159 before i merge and do a new release.

[guylap]

On my side, everything is working fine with this fix for all my users.
Mostly using Chrome.
Thanks

[brinley]

Would appreciate feedback from more testers as I dont have a Windows 10 touch device to test this with. If no issues are called out, I will merge and do a release this weekend

[brinley]

#159 has been merged and released as v2.1.3