Zoom and mode issues on tablet

thread-pond / signature-pad

A jQuery plugin for assisting in the creation of an HTML5 canvas based signature pad. Records the drawn signature in JSON for later regeneration.

BSD 3-Clause "New" or "Revised" License

730 stars 290 forks source link

Zoom and mode issues on tablet #176

Open jimmyfo opened 8 years ago

jimmyfo commented 8 years ago

This is on an ASUS Windows 8.1. tablet with touch. Two issues noted:

When in draw mode, drawing first with a mouse prevents drawing with touch; likewise, drawing with touch then prevents drawing with the mouse. Can switch modes only after reloading page.
When zooming in, either by mouse/keyboard/touch, the draw mode gets offset higher and higher so that it drops off the screen. Zooming back to normal works. I originally thought zoom needed to be added to the js file around here [offset = $(e.target).offset()] but it appears to work fine on a desktop.

These issues are Chrome 49.0.2623.87 m and IE 11.0.9600.17905.

thomasjbradley commented 8 years ago

I believe the signature pad figures out what kind of device you're on and either adds touch events or mouse event to prevent doubling up. I'm not sure how to get around the mouse/touch switching.

The zooming, I don't know. Zooming works well on other tablets that I've tested.

ChrisKaelin commented 8 years ago

We have a signature block that was setup by someone else and I have been tasked to look into an issue with zooming in on an Android phone. Zooming seems to be causing the draw area to move away from the 'signature box'. If there are other elements right below, then the seem to 'cover up' portions of the drawing area,

plupton commented 8 years ago

Ran into the same problem(bullet 2) as jimmyfo on a tablet using our implementation and the demo for requiring a drawn signature on a HP Tablet with IE 11. What I noticed is it only occurs if you zoom(using touch screen) and then scroll the window down. If you scroll back to the top again drawing a signature works again. Have you encountered this yet. I am guessing the drawLine method does not have the updated X, Y coordinates and is drawing the sig higher up.

ChrisKaelin commented 8 years ago

Check out the following issue. It shows what we did to fix our problem with zooming on Chrome for Android. Our signature block would then end up off the bottom of the screen and you would have to scroll to see it.

https://github.com/thomasjbradley/signature-pad/issues/178

plupton commented 8 years ago

Thanks Chris. I tried your solution but it did not work. My issue on the HP Tablet with ie11 seems to be that the offset value grows in size when you pinch zoom. So when the newX and newY are calculated the numbers are negative as the pageX and pageY are smaller than the offset values. The ipad solution seems to work perfectly as the signature pad draws perfectly when the canvas is zoomed in/out. Will keep digging and post my findings.

plupton commented 8 years ago

I have found a solution that works for me and have tested it on a HP tablet with ie11, Ipad and windows desktop ie11 and all seem to work with this change. I altered the drawLine method as follows: // newX = Math.floor(e.pageX - offset.left) // newY = Math.floor(e.pageY - offset.top) newX = Math.floor(e.offsetX) newY = Math.floor(e.offsetY)

Now when I zoom after scrolling the signature is not off the canvas and the coordinates are correct.

ChrisKaelin commented 8 years ago

Do you do any type of browser sniffing or do you use this method for everything? Have you been able to do any testing on Android devices with this method?