1803823 - signature on a touchscreen is not displayed correctly

Status: RESOLVED INVALID

(Core :: Widget: Win32, defect, P3)

Description

[Wohnbaugruppe Augsburg]

Attachment: 2022_12_02_Problem_Touch_signature-field.pdf

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:108.0) Gecko/20100101 Firefox/108.0

Steps to reproduce:

signing in a signature field on a website with a pen on the touchscreen

Actual results:

instead of the signature, the field will display lines from the top left corner to each recognised point of the signature (see attached document with pics)

Expected results:

The expection would be to see a clear signature (also pics in the doc)

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: UI Events & Focus Handling' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Ray Kraesig [:rkraesig]]

Maybe there are different ways to embed a signature on a web-form?
Do you recognize that behaviour and do you have any advise how we can prevent it?

As far as I know, there is no standard way to embed a signature in a web-form: one would have to track mouse/touch/pointer events and create the signature that way. Unfortunately, I don't recognize that behavior: I can guess what's happening, of course, but not why or at what level.

One possibility is that the Fujitsu device is not being detected as touch-capable by Firefox, and the web app's fallback path for handling pointer or mouse events is faulty. This can be checked by opening DevTools and typing TouchEvent. If that results in the text function (), then that's not the issue; but if it instead gives an error, you might try overriding Firefox's autodetection by setting the about:config preference dom.w3c_touch_events.enabled to 1 (from the default of 2) and restarting the browser.

If that doesn't work, or if TouchEvents are already enabled, let me know: it should be possible to write a script that collects some extra logs from Firefox and Edge for comparison purposes.

Comment 3

[Wohnbaugruppe Augsburg]

(In reply to Ray Kraesig [:rkraesig] from comment #2)
Hello Ray
thanks for your answers and sorry that I didn't respond earlier...

One possibility is that the Fujitsu device is not being detected as touch-capable by Firefox,
I realized that there was a fault in my first error description: We have the same (bad) behaviour with several Microsoft Surface devices.

and the web app's fallback path for handling pointer or mouse events is faulty. This can be checked by opening DevTools and typing >TouchEvent. If that results in the text function (), then that's not the issue;
TouchEvent gives back "function()"

but if it instead gives an error, you might try overriding Firefox's autodetection by setting the about:config preference >dom.w3c_touch_events.enabled to 1 (from the default of 2) and restarting the browser.
I've tested that - with no difference in the behaviour (I turned it back to "2" afterwards...)

If that doesn't work, or if TouchEvents are already enabled, let me know: it should be possible to write a script that collects some extra logs from Firefox and Edge for comparison purposes.
Such a script would probably be very helpful.

Comment 4

[Ray Kraesig [:rkraesig]]

Attachment: touch event logger.js

thanks for your answers and sorry that I didn't respond earlier...

If anything, I should be giving that apology.

A script is attached. You can drop it into the DevTools Console (in either browser, press F12 and select "Console" at the top); this should send a profusion of touch-event data to the console log when you touch the screen. This can be saved off for attachment here by right-clicking it and selecting the "Save [...]" option. (Please take care to filter out any sensitive information that may be in the console log before posting it here!)

I recommend testing using only a short diagonal line or two, rather than a full signature.

Comment 5

[Wohnbaugruppe Augsburg]

thanks for the script!
It either doesn't work, or I've made a mistake when trying to handle it:
It gives me an error stating:
"Uncaught SyntaxError: unexpected token: identifier" (debugger eval code:1:6)
I've pasted a screenshot as attachment.
Can you try to help out once more?

Comment 6

[Wohnbaugruppe Augsburg]

Attachment: error message when pasting script code into firefox console

Comment 7

[Ray Kraesig [:rkraesig]]

After typing "allow pasting", there is no need to press Enter. As soon as the warning disappears, you can paste in the script.

Comment 8

[Wohnbaugruppe Augsburg]

Hi Ray,
sorry - it took my some time again... Here's the output:
{"type":"touchstart ","touches":[{"#0044":{"client":[73,266],"page":[73,1727],"screen":[73,407]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[77,277],"page":[77,1738],"screen":[77,418]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[77,281],"page":[77,1742],"screen":[77,422]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[77,283],"page":[77,1744],"screen":[77,423]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[79,282],"page":[79,1743],"screen":[79,423]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[83,278],"page":[83,1739],"screen":[83,419]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[85,276],"page":[85,1737],"screen":[85,417]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[87,273],"page":[87,1734],"screen":[87,414]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[89,271],"page":[89,1732],"screen":[89,412]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[89,273],"page":[89,1734],"screen":[89,414]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[89,277],"page":[89,1738],"screen":[89,418]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[89,283],"page":[89,1744],"screen":[89,423]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[89,285],"page":[89,1746],"screen":[89,426]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[89,287],"page":[89,1748],"screen":[89,427]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[90,287],"page":[90,1748],"screen":[90,427]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[92,284],"page":[92,1745],"screen":[92,425]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[92,283],"page":[92,1744],"screen":[92,423]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[94,281],"page":[94,1742],"screen":[94,421]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[95,280],"page":[95,1741],"screen":[95,421]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[96,282],"page":[96,1743],"screen":[96,423]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[99,284],"page":[99,1745],"screen":[99,425]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchmove ","touches":[{"#0044":{"client":[100,285],"page":[100,1746],"screen":[100,426]}}],"changed":["#0044"],"target":["#0044"],"r":1} debugger eval code:34:15
{"type":"touchend ","touches":[],"changed":["#0044"],"target":[],"r":1} debugger eval code:34:15

---

I hope this helps? Please come back if you need anything else.

Comment 9

[Wohnbaugruppe Augsburg]

Attachment: Screenshot belonging to the trace

Comment 10

[Ray Kraesig [:rkraesig]]

This may not be conclusive evidence that there's a bug in the webapp, but it's very strongly indicative thereof.

If this were instead a Firefox bug, or even a touch-driver bug of some sort, one would expect the TouchEvent sequence to include a number of spurious events at (0,0). Instead it seems that the JavaScript in the webpage is simply receiving correct input and producing incorrect output.

I'm not sure what would cause this to occur on some devices but not others. (Perhaps the webapp is failing to load external scripts on those devices due to some enterprise policy configuration? Perhaps some feature-detection mechanism used by a dependency of the script is misfiring? Perhaps something is going sideways at the <canvas> interface?) But determining that is something the app's developers would be far better situated to do, I think.

If the webapp is visible to the public, this may be a webcompat bug, and can be addressed that way. Otherwise, closing as RESOLVED INVALID, on the belief that this isn't a Firefox issue. If you, or the app developers, can identify a specific misbehavior or questionable spec interpretation on Firefox's part that's causing this, please do reopen the bug!

Comment 11

[Wohnbaugruppe Augsburg]

Thanks a lot for your help and the analysis!