Signature pad seems morphed on very small screens

[Akhun-Delar]

Debug mode

• [X] I have enabled debug mode
• [X] I have read checked the Common Issues page

Describe the bug

When signing on a tablet in horizontal mode (or any screen like this), the signature pad seems "morphed". The more I move the pen to the right, the more it differs to this direction. In the left, pen and the line are correct.

Reproduction steps

1. Checkout an asset with a necessary signature
2. Start the acceptance process on a smaller screen like a tablet in horizontal mode (also happens if you lower size of your browser window)
3. Signature pad bugging

Expected behavior

Signature pad working as expected

Screenshots

No response

Snipe-IT Version

v7.0.11 & v7.0.12 as well

Operating System

Ubuntu 24.04

Web Server

Apache

PHP Version

8.1.2

Operating System

Windows 11

Browser

Google Chrome

Version

122.0.6261.129

Device

No response

Operating System

No response

Browser

No response

Version

No response

Error messages

No response

Additional context

No response

[snipe]

Can you provide a screenshot or video? I'm not sure exactly what you mean.

[Akhun-Delar]

Of course! This is in Chrome on my normal PC, window resized. Doesn't happen when you open the page on full wide screen, but only if you have the resized window and then load the page (or F5)

The bug seems to start at a screensize where the left menu bar is hidden

https://github.com/user-attachments/assets/e72e0dea-caa4-444e-9058-ecbcd3d1b54c

[snipe]

Hm. Is what I'm seeing different than what you're expecting?

https://github.com/user-attachments/assets/169fe373-0ecc-4b0b-a1eb-752b8b1d7231

[Akhun-Delar]

Basically yeah. If you watch closely, the drawn line also differs in your video. It's not on the cursor anymore when you go right.

[snipe]

I'm not sure exactly whether or not we can address that as it's a third party library, but I can certainly have @Godmartinz take a peek on Monday.

[Akhun-Delar]

No worries, our temporary solution is having tablets in widescreen mode lol

[snipe]

I mean, I use touchscreen signatures all the time here to sign for packages, and I'd wonder if any living person has ever successfully backed up that signature in a legal case, since it never looks like my actual signature. But this does seem to be a behavioral change.

I know we made a few small tweaks on that page recently, so it might be messing with the CSS. It's also interesting that it seems consistently inconsistent.

My early tests show that it gets further away from the pointer the further right you move on the sign pad.

https://github.com/user-attachments/assets/7b03fb8b-121e-4f6f-9c44-36ddeab1fb87

[snipe]

Quick question (if your use-case supports this) - does this only happen on asset acceptance+sign, or on accessory, etc acceptance+sign as well?

[Akhun-Delar]

Sorry for the delay, I tested now with Accessories - same thing happening :(

[snipe]

@Godmartinz do we have any updates on this one?

[marcusmoore]

I took this one over. No update besides being able to reproduce locally and jotted a few notes down about some config changes to try from the upstream library we're using.