[BUG] Signature captured on a mobile device gets expanded on the web

[srinisubramanian]

Environment

Please provide as many details as you can:

• Hosting type
  • [x] Form.io
  • [ ] Local deployment
  • Version:
• Formio.js version:Hosted
• Frontend framework: Hosted / Vanilla JS
• Browser:
• Browser version:

Steps to Reproduce

1. Design a a form such as this: https://iyeoemuuwlaldgx.form.io/signtest
2. Capture a signature on the mobile
3. View the submission on the form.io portal or export to PDF
4. The signature is being expanded to adjust for the larger width and height. However in the process the bottom part of the signature is getting truncated. (width: 100%, height: 150px)
5. If the height is also set to 100%, then the signature is getting expanded

Expected behavior

Signature fits into the panel without distortion

Observed behavior

Signature is getting truncated / enlarged

Example

Use this form for testing: https://iyeoemuuwlaldgx.form.io/signtest (Actually any form with a signature component and filled on mobile and viewed on web or exported to PDF will exhibit the same behavior)

Filled on mobile:

Expanded on web:

PDF: download (4).pdf

[wag110894]

Hello @srinisubramanian,

Thanks for reaching out!

We are able to replicate this issue on our side. We have created a ticket and will let you know the priority next week after our planning session. For reference, the ticket number is FIO-1280.

Have a great day!

[srinisubramanian]

If there is a preferred solution let me know and we can submit a PR to speed it up

[travist]

There is already a method in the Signature component to "redraw" the signature called checkSize

https://github.com/formio/formio.js/blob/master/src/components/signature/Signature.js#L130

My guess is that this method is not getting triggered at the right time for your use case. I would set a break point to see if this is the case. If not, then you can submit a pull request that binds the correct event that will fire when your use case is triggered and ensure that this method is called.

[srinisubramanian]

@travist Thanks for the hint. Resize seems to be called. Checking if it's happening at the right time. Will update

[srinisubramanian]

@travist Checked again with the latest version and the app we are working on .. the issue is a little different.

What you explained above is working and checkSize works as expected, let's assume the user filled it out on a mobile width 300px and height 150px. When this is shown on web, the panel is resized to let's say width 600 and height 150. The issue is the image is also scaled to fit. So the height remains 150px but the width is increased. This is not an aspect fit but really a stretch.

Since the height remains 150px, an aspect fit would mean retain the same width. So although the panel is larger the signature should probably not be stretched/scaled to fit. Any suggestions on what would be a good solution?

[travist]

We should not be stretching it, so that would be considered a bug. We should probably capture the signature radio (width/height) at the time of signature, and then ensure that ratio is maintained every time we render a signature. We are not currently doing this, so it would need to be developed. We will add it to our backlog, but this may be a good item for someone in the community to tackle since it will be a while before we get to it.

[srinisubramanian]

@travist that is right. This would simply mean there should be no expansion I guess. Since height is always fixed either to 150px or user defined and only width is changing, the signature should just be redrawn 1:1 in the expanded panel. This would mean the signature would probably need to appear to the left?

The next question would obviously be how to handle down sizing? For eg fill via web and open on mobile. That would probably mean no stretching but compressing should be done.

[Anandks1993]

Facing this same issue, any update to handle this issue? Thanks in advance.

[wag110894]

Hello @Anandks1993

This item has been added to. our backlog. We welcome a PR or we also have a process to expedite if you are interested.

[rustymcg9000]

Just following up if this item has filtered through the backlog at all ? If not, can you point me to the process to expedite - my company may considered it.

[GMacAussie]

@rustymcg9000 We were faced with the same issue. Quite frankly there was no solution we could come up with that would satisfy all screen sizes - either height remains constant and you get shrinkage from big screens, or height maintains ratio and gets large when entered in mobile but viewed on large screens...

We decided instead to fix the width of the signature to 420px (though we see old mobile devices with 375px - this is portrait), that way all our (self generated) PDF documents would at least have the same layout.

We did this by monkey patching - yes, not pretty but we were under time constraints (this is pretty much our code):

var SignatureComponent = window.Formio.Components.components.signature;

// old schema and init hook
SignatureComponent.schemaSuper = SignatureComponent.schema;
SignatureComponent.prototype.initSuper = SignatureComponent.prototype.init;

// wire signature field overrides
SignatureComponent.schema = function (...extend) {
    return SignatureComponent.schemaSuper({ width: '420px' }, ...extend);
}

SignatureComponent.prototype.init = function () {
    // call base class
    SignatureComponent.prototype.initSuper.call(this);

    // and override width
    this.component.width = '420px';
}

We would replace this with a solution that provided consistency across all devices...

[olgabann]

We're currently addressing a backlog of GitHub issues. Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!