Mouse out of sync with finger/stylus on Surface Pro

[tobiasalanboyd]

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]

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]

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]

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.

[azaquaz]

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]

@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]

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:

[vikrum]

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

[tobiasalanboyd]

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

[vikrum]

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]

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]

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