search

vikrum / kidpix

JSKIDPIX v1.0.2021
https://kidpix.app/
GNU General Public License v3.0
611 stars 26 forks source link

Mouse out of sync with finger/stylus on Surface Pro #8

Open tobiasalanboyd opened 3 years ago

tobiasalanboyd commented 3 years ago

I noticed while playing around with the software that trying to draw with a finger or stylus on the Surface Pro causes the drawing tool to be placed to the upper left of the mouse location by a considerable distance. This issue does not occur when selecting tools/colors or when drawing with the mouse. I can provide pictures or videos later if that would be helpful. Thank you very much!

vikrum commented 3 years ago

Oh no!

Yes, a video would be helpful. Thank you!

Is there also a mouse connected when you're using finger/stylus?

Is there a version associated with the Surface? What's the browser version?

Thank you!

tobiasalanboyd commented 3 years ago

Thank you for your prompt response! I will provide a video when I am able. There is a touchpad built into the keyboard I have connected to the tablet, but the issue persists even after disconnecting it. The Surface is a Surface Pro 5. Browser is Google Chrome 92.0.4515.131.

tobiasalanboyd commented 3 years ago

In case this is helpful at all, I took a screenshot showing the disparity. The purple dot was made with the mouse, and the blue dot was made by clicking with the stylus on the same spot. image

azaquaz commented 3 years ago

I know this isn't really designed to be used on a phone, but the same issue exists when using my phone's touch screen (LG V40). At the time, I thought it was probably an issue with screen size rather than touch controls, but if this also happens on a normal-sized touch screen then it could be the same bug. I was able to select the buttons at the left or top of the screen accurately without having to correct my taps down and to the right.

vikrum commented 3 years ago

@tobiasalanboyd - Hi, I don't have a device (or site that could simulate a stylus), however from your screenshot it looks like the event is offset by the width and height of the toolbars.

I think I found the bug in that event handling. However, I'm flying a bit blind as to whether I was able to fix it. I deployed a test fix here: https://kidpix.neocities.org/

Can you give it a try when you get the chance? Thank you for your patience!

tobiasalanboyd commented 3 years ago

Thank you again for your diligence with this issue! I tried out the test fix, and while there still is an offset, it is less than before: image

vikrum commented 3 years ago

Can you please try this codepen and let me know if it works properly for you: https://codepen.io/dus7/pen/qGQbVP

tobiasalanboyd commented 3 years ago

Yes, the e-signature field in the codepen syncs up with the stylus tip!

vikrum commented 3 years ago

Alright, I think I understand what's going on. The events are being offset due to the app layering all of the several canvas. I believe the css:absolute was causing the offset to be wrong in some touch interfaces (i.e. it seems ok in ipad for instance). I tried a different approach to layer the canvas using css/display: grid.

@tobiasalanboyd - When you get a moment, could you hard refresh and try https://kidpix.neocities.org/ again? Thank you!

If this doesn't work, I'll make a debug site to capture and dump all the events so I can better debug it.

tobiasalanboyd commented 3 years ago

Thank you for your patience. I had some difficulties with hard refreshing Chrome, as nothing seems to clear the session completely (not even having Developer Tools open, disabling the cache, and hard refreshing). The issue still persists on the Neocities test site.

vikrum commented 3 years ago

Ugh, ok. I'll aim to get my hands on a surface 5. Hang tight & thank you for your patience :)